Paulund

CSS Category

in CSS by Paul // May 17

Create A Full Page Background Image

In this snippet we are looking at what you can do with the CSS background-size property. This property will allow you to define the size of the image that you have defined as the background image, similar to how you will use the width and height when adding an image.

The value of the background-size property can either be:

  • Contains – This specifies that the image should be scaled to as large as possible while being less or equal to the background of the element.
  • Covers – This specifies that the image should be scaled to as small as possible while being greater or equal to the background of the element.
  • Percentage
  • Length
  • Auto

Therefore to make the image cover the entire background of the HTML element you will need to use the cover value just like the snippet below.
Read More →

in CSS by Paul // April 27

Firefox Only CSS

Firefox

One of the hardest things about front-end web development is to make sure that the website looks the same in any browser that the visitor wants to use. This means that you need to do your testing in IE, Chrome, Firefox, Safari, Opera etc…but just testing the website in the latest versions of the browser isn’t good enough. You need to go back through all the previous versions and test you website.

This is mainly a problem for supporting the old IE browsers, you end up having to hack about your CSS to get it to work in all versions of IE. I’ve previously wrote a tutorial about how to support older browsers of IE.
Read More →

in CSS by Paul // February 16

CSS Clearing Floats Snippet

Sometimes with float-based layouts you get to points where you need to clear the floats to get the desired layout you need.

An element that has the clear property set will not move up next to the floated element, but will move itself down past the floats.

Here is a small CSS snippet to clear floats on your page.
Read More →

in CSS by Paul // January 22

Style Links Depending On What They Are Linking To In CSS3

Since CSS3 you can actually define CSS styles by using the elements attributes, so I can look for input text box by setting the CSS.

input[type=text]

On links you use the attribute href to define where the link will send the visitor. Therefore you can use the same technique as above on the different things you are likely to link to.

Things like external page, internal pages, email, PDF, ZIP files are all possible media which you could could to.

External Links

If you define your external links with a rel=external then you can easily style these differently.

/* external links */
a[rel="external"]{
     font-size:16px;
}

Email Links

All email links will start with mailto, so in the CSS selector we are looking for all links which start will the words mailto.

This is done by using ^= which will return all likes which start with the follow.

/* email links */
a[href^="mailto:"]{
     font-size:18px;
}

PDF Links And ZIP Links

All you PDF links are going to end with the file extension of .pdf therefore you can use the same technique as the email links but change the logic to search for the end of the string, this is done by using $=.

/* PDF Links */
a[href$=".pdf"]{
     font-size:16px;
}
/* ZIP Links */
a[href$=".zip"]{
     font-size:16px;
}
in CSS by Paul // January 21

Use Different CSS When Javascript Is Enabled

Here is a snippet that allows you to have different CSS for when Javascript is turned on or off. You may need different CSS so you can deal with visitors who have Javascript turned off, you may want to display things differently.

To change how you display different CSS for when Javascript is on you can add a CSS class to the html tag so you can filter the CSS down to the child tags.

Javascript

Here is a raw Javascript way to add a CSS class if Javascript is turned on.
Read More →

in CSS by Paul // December 19

Cross Browser CSS Opacity Property

Internet Explorer

With CSS3 new features most of the browsers don’t use the same properties they need to be prefixed with the browser specific property.

For example firefox is always prefixed with a -moz- and the chrome/sarafi is prefixed with a -webkit-.

Below is a snippet to be used for cross browser transparency for the opacity property.
Read More →

in CSS by Paul // December 19

iOS Media Queries Boilerplate

Apple Iphone

Media Queries are now becoming quite common practice in web design. They allow you to change the CSS of the different elements on your web page depending on the size of the screen the visitor currently can see.

Below is a media query boilerplate you can use to change the design of your depending on if the user is using an iPad or and iPhone. This snippet even allows you to change the design if the device is landscape or portrait.
Read More →

in CSS by Paul // May 1

Transparency using CSS3

What?

Using a new feature with CSS you can set a transparency to any element on the your website. This can be a div or a paragraph, which can be useful to use when you have a text with a background color overlaying an image.

You can change the transparency level to any level from completely see-through to just a very light transparency
Read More →

← Older Entries