Tag: css

If you regularly visit my website or blog you will have noticed that I have made some changes ( and one reason why I haven’t blogged as much as I used to over the last two months). Before I allowed myself to take my local site to the live server I had to do some basic testing and every website should go through this same process to ensure as few problems occur so your users can enjoy your experience to its fullest and also make sure your business looks professional. In this blog post, I will discuss 5 areas that must be tested before you allow yourself to let the website into the public domain.

Continue “Testing a website before it goes live”

Responsive design has been here for a long while now and it is probably one of the most important design aspects of a website today. A responsive website will flux in size and layout depending upon the users media device, unfortunately embedding youtube videos into a website doesn’t always work well on your website but using some simple css code can help you find a way around this. In this post I give some brief code and a quick guide on making responsive youtube videos for users of WordPress.

Jetpack Edit CSS

I want to make this as simple for novice coders to follow so I recommend installing and activating the JetPack plugin from WordPress so that features to add CSS will be easier. Once you have activated the JetPack go to Appearance tab and then ‘edit CSS’.

If you are a bit unsure of CSS this is what the following code means. This code looks for the element ‘iframe’ in the ‘video-responsive’ css class and gives the video a height of 100% and width of 100% doing so ensuring the iframe takes on the width of its containing div. If you are feeling a little lost, don’t worry, simply copy the code and paste it into your Jetpack edt css feature and continue to follow the guide.

.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}

.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}

This is the first stage of designing a responsive div tag for video, next you need to gather the embed code provided by YouTube.

Stage 2: use embed code and div class to create responsive youtube videos

Copy the embed code from your youtube video, go back to your WordPress website, ensuring your page is in ‘HTML’ mode rather than ‘visual’ and paste it into the desired page in the location you wish to display it.

Once the code is in place surround it with <div class=”video-responsive”>replace with embed code from YouTube</div>. This will call the css we wrote earlier to ensure the video responds as we want it to.

Once all that is complete save your page and refresh your browser to see your YouTube Video responding something like that seen below.

If you have any problems creating a responsive youtube video please feel free to leave a comment below and I will get back to you shortly.

How to create gradients was always the domain of photo editing software and vector creating programs, but now with modern technology and css3 you can create gradients with some coding that is fairly easy to learn. This is a brief guide on what you need to know on how to create gradients in css.

Where might I use gradients?

Gradient code is most likely to be used in buttons and backgrounds of websites or navigational system but don’t restrict yourself to  just the common places that they are found, if you have a good idea for use of a gradient then go ahead and try it out, there are no limits to experimenting with code and creativity, the only limits to design is your imagination and maybe a bit of technical understanding.

Selecting colours in the Hex code for your gradient

When creating gradients it is useful to know the hex codes of colours. A hex code is short for hexadecimal numbers which are as follows : –

0 1 2 3 4 5 6 7 8 9 A B C D E F

0 being obsolete of colour ( or we know it as black ) and F is white. Combining a set of these numbers together in how monitors display colour ( RGB, Red , Green & Blue ) we can create over 16 million colours. I have shown below how numbers choose the intensity of each colour, it does help if you have a little understanding of how colours mix.

#ffff00

I have shown above that two numbers given in a 6 digit hex code make up a screen colour, so for instance the first two digits, ff equals maximum intensity red followed by two more ff’s which equates to maximum intensity green but I have finished this code with 00 in the blue which means there will be no blue displayed in this code.

Do you know what colour this makes? If you are a painter you will think brown but actually we are not mixing paints here, we are mixing light together so the colour returned is in fact yellow! Watch this video below of RGB to see how light mixes, it’s quite insightful.

If you want to select colour easily then w3schools have a colour picker on their website here or if you want to understand computer colour theory further please visit this informative link from htmlgoodies.com.

I’m more a visual person, I want to be able to see the gradient

The difference between coding a gradient and visually creating one via editing tools is great and sometimes a few numbers on a screen is a little hard to understand for the novice css coder or simply for the general human being, but there is a solution! Colorzilla.

Colorzilla this is how to create gradients in css

Colorzilla allows you to play with gradients till you are blue in the face, pardon the pun, till you find the perfect visual combination. Just like major photo/illustration editing tools you have oodles of options like adding more colour stops, selecting preset designs, the orientation of the gradient, opacity and other things you can find in major applications for editing visual elements.

What is even better about Colorzilla is that once you have created your gradient

the code is also generated so you can easily copy and paste the gradient code into your css style sheet for the relevant element of your site, it even applies webkits for browser compatibility! It’s a great tool but it is also important to understand the code rather than simply cutting and pasting. You can find many reasonable tutorial websites and I recommend spending at least an hour a day on advancing your skills, the thing with our profession is that it is ALWAYS evolving so it’s important that you don’t decay when new technology comes about.

To play with the gradient website please follow the link below and secondly, please leave a link in the comment box below on how you have used gradients in your designs. Happy digital colouring in!

Create your gradients with Colorzilla today

Here is an alternative with fewer options

Linear Gradients

And finally, a gradient animator!

Gradient Animator

In widely used CMS WordPress you may notice a drop down list with Paragraph as the first option. When you click this box you will find various formats for your text from Heading 1 to Heading 6. You may be wondering why are there so many headings or you may even be thinking that you only need to use them for emphasising or increasing the size of font but that is not the true purpose of headings. In this post i explain how to use heading tags to full effect.[divider style=”1″]

Continue “On the head son!”