That being said, not all web designers and developers follow best practices. If you want to be a good web designer/developer, writing clean, manageable CSS is a healthy habit to make your code easier to maintain as your project development progresses.

Even if you’ve been building web pages for a quite a while, you may still have a few bad CSS writing habits that you’re better off forgetting. This post will also introduce you to some techniques that will help you get the most out of CSS and write beautiful, manageable stylesheets.

Let’s begin:

Bad CSS Practices

Using the Same Rule Repetitively

A lot of beginners use repetitive rules for each element. If you want to create a rule for multiple elements, use a class attribute instead.

For instance, instead of repeating color: blue rule for every tags and ID:

#intro1 {color: #3498db; font-size: 10px; font-weight: bold;}

header {color: #3498db; font-size: 20px; background-color: green;}

#banner {color: #3498db; font-size: 30px; background-image: url(images/static.jpg);}

Use a class instead:

.blue {color: #3498db;}

Using an ID Selector for Multiple Elements

When writing CSS, there should only be one ID in the HTML. Always use the class attribute for multiple elements.

For instance, instead of:

<p id="big">This is a great heading.

<p id="big">This is absolutely a greater heading.

You should use:

<p class="big">This is a great heading.

<p class="big">This is absolutely a greater heading.

Over Using the !important Rule

The !important rule was conscripted in the mid-to-late 90’s to help web designers and developers override the rules of their style sheet. The !important rule prevails over all the previous styles and says, “I’m more important, forget about all of that other CSS and use me!“. Using this out of laziness will give you a headache later on as your style sheet will be harder to maintain.

For instance:

header { 
    color: #e74c3c; 
}
header.intro {
    color: #3498db !important;
    font-size: 20px;
}
header#capture { 
    color: #2ecc71; 
    font-size: 20px;
}

In the above example, the header color is red. Except the header with the class intro and the one with the ID capture. The importance of the entire rule (both the color and font-size in this case) is accomplished by the specificity of the selector.

If you use !important, it is added at a property level, not a selector level. This means that the color property has a higher importance than the font-size. The color is more important than the color in the header#capture selector too.

Recommendation: You should only use the !important rule when overriding styles in a user style sheet, overriding 3rd party code and inline styles as well as utility classes.

Using the !important rule is often considered a bad practice due to the clutter it can bring with one of CSS’s core mechanisms which is specificity.

Using Inefficient CSS Selectors

When you are using selectors, the longer it is, the higher specificity it will comprise. This can break the CSS cascade and mess up the styles of your site.

This can be avoided by not using IDs within the selectors as they are directly specific.

For instance, we have these long selectors:

#header #intro h1.big a {... }

#header #intro h1.big a.normal {... }

We can compress it up to two or three levels deep:

.big a {... }

.big .normal {... }

Using Tons of Webfonts

It is understood that typography is a fundamental element of good web design, branding and readability.

However, regardless of the viewport size and resolution, web fonts are crucial to good web design, UX, and performance. Each font is an additional resource and not all web fonts render text well.

Depending on how you optimize the font and how they are loaded, it may affect the page size and the rendering time.

It is recommended to use one or two (probably a maximum of three) web fonts for your site and fall back to the browser defaults to keep your site optimized.

Using Inline Styles

Using Inline Styles is probably one of the worst CSS practices that many web designers and developers are still doing to this day. It transgresses the main goal of why we use CSS – which is to separate style from the HTML structure. This breaks the specificity of web pages.

It’s considered a good habit to keep your CSS and HTML separate. When you add inline styles, it makes it difficult revising the design of your site and makes your code harder to manage.

However, you can use inline CSS for HTML emails as many rules are not supported by email clients. This is an important thing if you are creating newsletter designs.

Overall, inline styles are at the lowest level of the cascade as they’ll override all other styles, so you need to be careful when using it.

CSS Good Practices

Now that we’re done talking about bad practices in writing CSS, let’s now take a look at some of the good ones.

Use a CSS Table of Contents

It is recommended to use a CSS table of contents when starting your style sheets. This will help you track down your code easily as you move along. Keep things organized and you will write styles more efficiently.

Consider this example below:

/* Project Meta */

/* reset  */

/* general */

/* typography */

/* grid */

/* header */

/* footer */

/* Page template A */

/* Page template B */

/* Media Queries */

Make Your CSS Readable

Writing clean sets of rules involves making the code readable. Having a readable CSS makes it much easier to maintain in the future, as you’ll be able to find each rule more quickly.

There are two ways you can make your CSS readable.

1. One line Form

.box {background: #3498db; border: 1px solid black;}

2. Standard Form

.box {
background: #2ecc71;
border: 1px solid black;
}

Separate jQuery Plugin Stylesheets

If you are using jQuery plugins, you need to put their styles into another style sheet and name it an easily remembered name such as JS-plugin.css. This will help you organize all of your CSS, in particular when you need to add or modify styles of your jQuery plugin.

Use a CSS Reset

A CSS Reset (or “Reset CSS”) is a compressed or minified set of CSS rules that resets all the styles of your HTML. Adding a reset reduces browser inconsistencies by providing general styles that can be modified and extended.

The MeyerWeb is the most popular and widely use CSS reset, although there is another option which is normalize.css by Nicolas Gallagher. It’s a modern HTML5 kind of CSS reset. You can use a CSS reset by either placing the source file link in your HTML file or copying the whole CSS reset into your style sheet.

Add CSS3 Animations Last

It is recommended to add CSS3 animations last in your style sheets to avoid any discrepancy when editing rules higher in the sheet. This will make the web browser load the important and basic CSS first before executing the animations.

Combine Elements

If elements within your style sheet share the same rules, you can simply combine all of them in one line or in a standard form instead of rewriting code over and over again.

For instance, your h1, h2, and h3 elements might all share the same font-family and color.

h1, h2, h3 {font-family: 'Lato', sans-serif; color: #dadada;}

Use Shorthand Properties

Shorthand properties allow you to set the rules of numerous CSS properties simultaneously. Using a shorthand property will shrink your CSS and increase readability.

For instance, instead of using margin-top, margin-right, margin-bottom, margin-left separately you can simply use just one line.

#div {

margin-top: 10px;

margin-right: 10px;

margin-bottom: 3px;

margint-left: 4px;

}

#div {margin: 10px 10px 3px 4px; // top, right, bottom left}

Always Use Comments

One of the best practices for writing CSS is placing a comment on each group of elements. This will give you an ease of accessibility when you are looking for a specific groups.

/* GENERAL RULE */

html,

body {

font-family: 'Lato', sans-serif;

height: 100%;

background: #ecf0f1;

overflow: hidden;

}

h1 {

color: #3498db;

text-align: center;

font-size: 35px;

margin: 100px 0px;

font-weight: 700;

}

Use CSS Preprocessors

This is is a hot topic lately. A CSS preprocessor is a scripting language that extends CSS and then compiles it into regular CSS files.

There are three primary CSS preprocessors available today, Sass, LESS, and Stylus. Using a preprocessor can help speed up your development process as it minimize the repetitive tasks such as placing hex color values, closing your tags and so on that every web designers and developers often encounters.

Compress Your CSS

Another way to write efficient CSS is to shrink the file size by using tools like CSS compressor or Minify CSS to help the browser speed up the loading time. This will remove white spaces, line breaks as well as repetitive CSS styles.

Use Hex Color Often

There are several opinions and arguments on the web when it comes to choosing between Hex color and color name values. Different browsers may be unable to define what some color names mean. Hex color values are assured of matching across a palette of 16,777,216 colors while HTML and CSS are limited to 140 colors. There are not names for all 16 million 24-bit colors, so Hex is a good choice when it comes to choosing and deciding which color variation you should use.

You can check the CSS Color Module Level 3 here for more information.

Validate

Validating CSS with the W3C free CSS Validator will help you check your code and see if there are any errors. Things like aforgotten closed bracket or missed semi-colon will be easily found by this handy tool.

Try it out!

What’s Next?

After discussing the good and bad CSS practices, it’s now time for you to apply what you’ve learned here.

A sign of maintainable HTML, CSS, and JavaScript is when web designers and developers can easily and quickly modify parts of the code without affecting other, unrelated parts.

What are your thoughts? What good and bad CSS practice can drive you off the wall? Please leave a comment below.

The post The Good & Bad CSS Practices for Beginners appeared first on Speckyboy Design Magazine.

Its greatest feature is its ability to manipulate an item’s width/height to occupy all the space within its container (also known as a “flex container”) – otherwise, it shrinks to prevent overflow.

Unlike the regular CSS box model, flexbox offers an enhanced model for block elements without the use of floats. And, it supports direction – which means you can control the flow of each item vertically or horizontally. Almost all browsers that are active today support it, so it’s good to know how it can be used on different kinds of projects.

To give you an idea of how amazing flexbox is, I wrote this quick tutorial to show how you can use it on your website. We’ll use flexbox properties and media queries to enable the responsive layout of each element on different screen sizes and show you the advantages of using it on your projects. Let’s get started.

If you’re new to flexbox, you might also like to take a look at these Guides, Tools & Frameworks for getting started with CSS flexbox.

Navigation Bar Using Flexbox

Flexbox is perfect for creating a responsive navigation. You can lay out the navigation in one column on smaller viewports, scale it up on medium size viewports and position it in one row on large and extra-large viewports. Let’s look at how to create a navigation using flexbox.

For the HTML, we will wrap our navigation within a header tag. We will use an unordered list (ul) for our links with their respective classes. Here is the HTML:

<header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
  <ul class="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

For the CSS, we will first add the basic styles that we need:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2,h3,a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.header {
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  -moz-box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

When the viewport is 769px or wider, we will use flexbox to change the vertical layout of the navigation to a horizontal layout. That will fill the horizontal space of the large and extra-large screens and devices.

To do that, we will use media queries to manipulate the layout. We will declare the display: flex to set the flexbox on all elements. We will also set the flex-direction: column to set the axis of our element from top to bottom.

@media (min-width: 769px) {
  .header,.main-nav {
    display: flex;
  }

  .header {
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    max-width: 1150px;
  }
}
}

On a screen size with a minimum width of 1025px, we will set the flex-direction: row with justify-content: space-between. This means that our header will be displayed horizontally instead of vertically.

@media (min-width: 1025px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
}

Here is the final output:

See the Pen Flexbox Navigation Bar by Sam Norton

Thumbnail Gallery with Flexbox

Thumbnails are smaller versions of images that are organized in a particular area of a website to give you a hint of how the full-sized picture looks. Usually, thumbnails are used for image galleries. With flexbox, you can create thumbnails using the row property while manipulating the display size of the image.

For our thumbnail example, we will create a div with a class of thumb that will wrap all of our thumbnail images. This will also be our flex container.

<div class="thumb">
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
</div>

For our CSS, we will set a width for the flex container, which is the thumb class. We will then set the display to flex to set the flexbox property inside it. There are three properties that we need:

• flex-wrap – to set our flexible items in a single line or can be flowed into multiple lines. In this case, we use wrap. This means our thumbnails will be set to the multi-lines direction.
• flex-direction – to specify the direction of the flexible items. In this case, we set it to columns. This means our thumbnails will be displayed from top to bottom.
• flex-flow – which is a shorthand property for the flex-direction and the flex-wrap.

.thumb { 
  width: 30%;
  margin: 0 auto;
  border: 1px solid #898989;
  padding: .6vw;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Next, we will set the width on our images using the box-flex property to auto. To specify a -moz-box or -webkit-box grows to fill the box that contains it. The rest of the code is simple media queries to manipulate the padding on a viewport with a maximum width of 480px.

.thumb div { 
   width: 100px; 
  margin: .6vw; 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
}
.thumb div img { 
   height: auto; 
  width: 100%; 
}
@media screen and (max-width: 480px) {
  .thumb div { margin: 0; }
  .thumb { padding: 0; }
}

Flexbox Forms

A form is a vital part of every website. It enables users to input data using checkboxes, radio buttons, or text fields that are sent to a server for processing. With flexbox, you can create responsive forms without depending too much on media queries.

Let’s first create our text fields and wrap them within a form tag. For our container, we will use a div with a class of form.

<div class="form">
  <form action="#">
    <div>
      <p class="title">Registration Form</p>
      <p><label for="first name">First Name :</label> <input autofocus="" id=
      "first_name" type="text"></p>
      <p><label for="last name">Last name :</label> <input id="last_name" type=
      "last_name"></p>
      <p><label for="email">E-mail :</label> <input id="email" type=
      "email"></p>
      <p><input class="btn" type="submit" value="Register"></p>
    </div>
  </form>
</div>

For our CSS, we’ll add first the basic styles:

form {
  border: 1px solid #555;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  margin: 0 auto;
}

.title {
  font-size: 27px;
}

.btn {
  position: relative;
  vertical-align: top;
  height: 40px;
  width: 25%;
  padding: 0;
  font-size: 15px;
  color: #fff;
  text-align: center;
  background: #4d4d4d;
  border: 0;
  border-bottom: 2px solid #d0d0d0;
  cursor: pointer;
  margin-left: auto;
}

label {
  width: 7em;
  margin-right: .5em;
}

Now to make it responsive, let’s add display:flex on the paragraph label tag so that it collapses on smaller screens. We will also add flex: 1 on our input type to enable all of the flexible items on the same length inside the same container. We will then add our media queries for screens with a maximum width of 600px and display the labels of each field as block elements as well as the button element.

input:not([type="submit"]) {
  flex: 1;
  padding: 10px 20px;
  box-sizing: border-box;
}

p {
  display: flex;
}

@media (max-width: 600px) {
  p {
    display: block;
  }

  input {
    width: 100%;
  }

  input[type="submit"] {
    width: 100%;
  }
}

Check the final output below:

See the Pen Flexbox Forms by Sam Norton

Sticky Footer with Flexbox

A sticky footer is a footer that “sticks” to the bottom of the screen no matter how long or short the content of the web page is. While there are several ways to create one, flexbox is a great option.

For our HTML, let’s create a simple web page using the header, section, and footer tags:

<header>
  <h1>A Big Header</h1>
</header>
<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer>
  <p>© Flexbox Sticky Footer</p>
</footer>

For our CSS, we will set the display: flex property to our body tag to enable flexbox. We will also set the flex-direction column to set the direction of the flex items from top to bottom, along with some basic styles.

body {
  font-family: 'Montserrat',sans-serif;
  line-height: 1.6;
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

Since we are using the section tag as our container, we will set the flex property to 1. This sets the section content to the same length regardless of its content relative to the rest of the container.

section {
  padding: 10px;
  flex: 1;
}

The rest are just simple styles for our elements.

Check out the demo below:

See the Pen Flexbox Sticky Footer by Sam Norton

The CSS3 Flexible Box is a very helpful feature nowadays. Many web designers and developers find it easier to use on their websites than the typical CSS layout model.

The post Getting Started With CSS Flexbox Using Practical Examples appeared first on Speckyboy Design Magazine.

What You Will Need:

• Font Awesome Icons.
• Lato (via Google Fonts).
• A basic knowledge of CSS3 transitions.
• A little time and patience.

What We Will Be Creating::

Download Source Files View Demo

Creating the Markup

For our markup, we will wrap everything in a container. We will then use an unordered list with the class icon-menu for our menu items:

Next, on our list of items, we’re going to add the class icon-box with its title class (e.g. home, design etc.). Then we’ll add the Font Awesome icon (4x) and place an <h2> tag within an anchor tag:

You can visit this page here ) if you want to choose some other icons.

  

    

       
      
Home
    
    

       
      
Design
    
    

       
      
Coding
    
    

       
      
Shop
    
    

       
      
Contact
    
  

Adding the Style

Before we move forward on to the main CSS, let’s add some general styles for both our minor elements and menu lists elements:

@import  "https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900";

body {
  font-family: 'Lato',sans-serif;
  background: #ecf0f1;
  overflow: hidden;
}

a {
  text-decoration: none;
}

h2 {
  color: #fff;
  font-size: 22px;
  margin: 0 24px;
  font-weight: 300;
}

/*= ICON BOXES
--------------------------------------------------------*/
ul.icon-menu {
  margin-top: 16px;
}

li.icon-box {
  width: 120px;
  height: 120px;
  list-style: none;
  left: -47px;
  position: relative;
  margin-bottom: 3px;
}

li.icon-box.home {
  background: #2b99ce;
}

li.icon-box.design {
  background: #24cccd;
}

li.icon-box.coding {
  background: #9a639a;
}

li.icon-box.shop {
  background: #c44745;
}

li.icon-box.contact {
  background: #2d9a63;
}

.icon-box h2 {
  font-size: 20px;
  text-shadow: 1px 1px 2px rgba(150,150,150,1);
}

.icon-box a {
  display: block;
  padding: 0;
  width: 120px;
  height: 120px;
}

i.fa {
  position: absolute;
  pointer-events: none;
  color: #fff;
  margin: 16px 0 0 14px;
}

.icon-box a:focus,.icon-box a:active {
  outline: none;
}

On the styles above, we basically added width and backgrounds to each of the boxes where the icons have been placed, and then positioned them on the left-side.

Next, let’s animate the Font awesome Icons. For the hover effects we’ll use a combination of CSS3 transitions and transformations. When the user hovers over the Font Awesome icons, the position of the rgba background element in the 3D space will move using the 3-dimension vector whose coordinates describe how much it moves in each direction. The CSS3 transition property was also applied to the transform property for a smoother effect.

.icon-box a {
  padding: 120px;
}

.icon-menu i {
  border-radius: 50%;
  box-shadow: 0 0 0 50px transparent;
  padding: .2em .25em;
  background: rgba(255,255,255,0.1);
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition: box-shadow .6s ease-in-out;
  -moz-transition: box-shadow .6s ease-in-out;
  -o-transition: box-shadow .6s ease-in-out;
  -ms-transition: box-shadow .6s ease-in-out;
  transition: box-shadow .6s ease-in-out;
}

.icon-menu li:hover i,.icon-menu li:active i,.icon-menu li:focus i {
  box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out;
}

For our main menu links, using the icon-box and title class within the <h2> tag, we will manipulate the position and appearance of each list item (on hover mode) with CSS3 transitions. This will add a smoother effect:

.icon-box.home h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #2b99ce;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #247eaa;
}

.icon-box.home a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

.icon-box.design h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #24cccd;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #1da7a8;
}

.icon-box.design a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

.icon-box.coding h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #9a639a;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #6d466d;
}

.icon-box.coding a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

.icon-box.shop h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #c44745;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #9b3735;
}

.icon-box.shop a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

.icon-box.contact h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #2d9a63;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #1e6b44;
}

.icon-box.contact a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

Finished!

There it is! A nice vertical slide-out menus, ready to drop into your nest hosted project. With some basic knowledge of HTML and CSS3 animation, you can easily change the look of the menu and features for tiles.

Don’t forget to download the source files.

The post How to Create a Vertical Slide-Out Menu with CSS Transitions appeared first on Speckyboy Design Magazine.

Because of the fact that there are still people that use older browsers such as IE7, using CSS to work across different browsers is still a tricky job – regardless where your site is hosted.

While a consistent appearance on every web browser is the key in providing a better user experience, it should be done carefully to avoid any cross-browser issues.

In this article you will learn about some of the important things you need to consider as a CSS beginner when building sites that work properly and look good in all browsers.

Use a CSS Reset

Web browsers behave differently – especially when it comes to reading basic HTML elements. Including a CSS reset in your style sheet will eliminate lots of potential cross-browser styling issues when viewed on different browsers. You can either create your own reset CSS, use the popular reset.css or normalize.css, which are available online. This is what the Meyer Resest looks like:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Use Vendor Prefixes and Fallbacks

If you consider using CSS3 features such as gradients or border radius, it is important that you enable your styles to handle fallbacks – especially when a browser doesn’t support a CSS property.

Using vendor prefixes will let older browsers understand the fallbacks and skip the code that it can’t use. Otherwise, the new browsers will implement it on its platform.

The following is a list of vendor prefixes for each of the popular browsers.

• -webkit- (Chrome, Safari, newer versions of Opera)
• -moz- (Firefox)
• -o- (Old versions of Opera)
• -ms- (Internet Explorer)

Target IE Browsers Specifically

As we all know, Internet Explorer has caused many issues in the past. If you are having issues with IE8 or below, you might consider using IE conditional comments. They provide a mechanism that targets specific versions or IE as a group.

IE conditional comments are made up of HTML markup wrapped in a conditional statement. If the statement returns true, the enclosed HTML is shown within the HTML file.

Here’s a basic form of an IE conditional comment:

<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Here’s a conditional comment if you want to target all IE browsers except IE7 and above:

<!--[if lt IE 7 ]>
<p>Only less than IE 7 will see this</p>
<![endif]-->

Target IE versions greater than 6 or above:

<!--[if gte IE 6 ]>
<p>Only IE 6 and greater will see this</p>
<![endif]-->

You can also exclude one of the IE browser versions by using the (!) exclamation sign just before the IE version. See the code below:

<!--[if !IE 6]>
<p>IE7 or IE5 only</p>
<![endif]-->

If you want to learn more about this, I would recommend reading Sitepoint’s tutorial here.

Always Clear Floats

Clearing floats has been a widely used protocol in web development for several years. Using “clearfix methods” will let you fix the float issues on any web browser. There are two suggested methods you can use:

1. Using the clear property:

One of the most common ways to clear floats is by using the clear: both property and value which mimic the use of tables for layout. This usually goes with a defined class named clear. Check out the CSS example below:

.clear {
clear: both;
}

2. Using the overflow property:

Another great method to clear a float is to use the CSS property and value overflow: hidden to force the container of the elements to extend to the height of the elements that are floated. Consider this CSS:

.container {
overflow: hidden; 
}

Always Check CSS Display Types

CSS uses a display type for each element such as inline, block, inline-block, table, and many more. When you build within the W3C standards, mixing display types is common, but something to check on during the debugging process.

You can visit the MDN docs display page for a full list of the CSS display types.

Validate Your CSS

After setting up your CSS you can then validate your code via CSS Validation Service. This will help you debug some issues within your style sheet that can also prevent things from breaking on different browsers.

Use Cross-Browser Plugins

Apart from implementing some tricks to make sure that you will have the same page layout across multiple browsers, you can also use some good plugins to help browsers detect HTML5 and CSS3 features.

Some of them are on the list below:

• Modernizr – a feature detection JavaScript library that lets the browser detect which HTML5 and CSS3 features your user’s browser supports. It enables developers to test for features supported and then provide fallbacks for browsers that do not support them.
• CSS3Pie – enables a few features that are missing in IE such as CSS rounded corners and allows for the use of standard CSS code for these features in all browsers (including IE).
• CSS Browser Selector – a very light JavaScript library that gives you the ability to write specific CSS code across different browsers.

Testing Tools

CSS tricks are nothing if you can’t test them on different browsers to make sure they work. Below are some useful cross-browser tools that are freely available over the Internet.

• Quirksmode – a good place for hunting down cross-browser issues. It uses strict mode to interpret your CSS and gives an overview report of the possible issues.
• Browsershots – helps show how your page will be displayed across multiple browsers and operating systems by taking screenshots of your web pages rendered on real browsers.
• IE Tester – a free web app that enables you to see the look of your web pages within Internet Explorer 5.5, 6, 7, 8 and 9 in a MS Word-like interface.
• Sauce Labs – a cross-browser testing tool for testing your site across different versions of browsers and operating systems. (Recommended by Adobe Systems).

Wrapping Up

There is so much more to discuss on the topic of cross-browser CSS. More than tricks and tools, you also need to consider knowing the foundations of CSS.

Cross-browser has been a big topic within the web development community from the very beginning as technology always improves and, almost every year, there are new browser versions coming out.

I hope that the tricks and tips in this article are helpful to your cross-browser journey.

The post The Cross Browser CSS Styling Tips You Need to Know appeared first on Speckyboy Design Magazine.

However, CSS continues to improve – even though there are still some attributes which are not so well-known. CSS has become more efficient and closer to the features we’d normally implement using JavaScript and other web programming languages.

In this article, we cover some of those cutting-edge CSS3 features that are essential to modern web design.

Multiple Backgrounds

CSS3 allows you to apply multiple backgrounds to elements using a simple comma-separated list. The list is layered to one another with the first background you set up on top and the last background listed on the bottom. Take note that only the last background on the list can display a background color.

Here’s a basic example:

As you can see from the example above, three backgrounds are stacked. A list was also used for the other background properties such as background-repeat and background-position to manage the display of the images.

Background-Clip

Do you remember the days when you needed Photoshop to create image-based text? Photoshop isn’t needed near as much, as CSS3 introduced a property called background-clip that does exactly the same thing.

You can now clip an image with text using the background-clip property. First, you need the div element for the image to be placed above the h1 or the text element you want to clip. Now by using background-clip property, you can clip the image with the text. Make sure that the text-fill-color is transparent.

Below is a demo of how background-clip works:

CSS 3D Transform

With CSS3 you can create an imaginary 3D space. To activate 3D space, an element needs perspective. This can be done in two ways: using the transform property, with the perspective attribute value.

transform: perspective(600px);

Or using the perspective property itself:

perspective: 600px;

The strength of the effect is determined by value you give to it. As the value becomes smaller, the closer you get to the Z plane. The effect yields an impressive result. Below is a demo on how you can manipulate a 3D effect using the transform property:

Calculate Values

One of the features of CSS3 that I love is that you can calculate values of elements using the calc() function. Just like a calculator, it can perform simple mathematical calculations such as the size, angle or frequency.

Check out the code below to see how it works.

The HTML:

This is the text inside the container!

The CSS:

.container {
 width: 80%; /* fallback for browsers without support for calc() */
 width: calc(100% - 80px);
 text-align: center;
 margin-top: 20px;
 position: absolute;
 left: 40px;
 border: 1px solid #3b3b3b;
 background-color: #1dd046;
 padding: 10px;
}

In this example, the CSS creates a container box that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window.

Blend Mode

Using the background-blend-mode property, you can blend images with colors. Just like in Photoshop, you can use different color effect variation properties (blend modes) such as screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. Of course, using the normal property will just retain the original.

Below is a simple demo:

Notice that I used the blend mode property value screen. This would create an image-color blended effect.

Text Overflow

Another great feature of CSS3 is the ability to deal with clipped text which does not fit into its container using the text-overflow property.

text-overflow has three optional values:

1. clip – this is the default value. This will clip the text.
2. ellipsis – this will display an ellipsis ("…") to represent clipped text.
3. initial – this will set the property to its default value.

Note: text-oveflow comes with an overflow property that can be set to hidden, scroll or auto. You can also use white-space:nowrap; to determine the way text is laid out. Check out the examples below:

CSS3 Animation

Before, you could only create animations using JavaScript. But thanks to CSS3, you can add create cool animations without needing to know JavaScript.

There are two ways you can create a cool animation:

1. transition – which adds a smooth transition on mouse over state.
2. @keyframes – this one might be a little bit complicated, but it lets you create an advanced animation.

Let see how these two work. Check out my demo below:

If you want to learn more about CSS3 animation, check this post out.

Flexbox

flexbox is a layout mode in CSS3 which was built to enhance an items’ alignment, direction and order within a container. The advantage is that they work on different screen sizes and devices.

The flexible box model provides an enhancement over the block model without the use of floats. This means that the container’s margins don’t collapse with the margins of its contents.

Let’s see a basic example of a flexbox layout:

To enable a flexbox layout, you need to set the display property to flex or inline-flex on the parent element (flex-container). This will automatically set all of its children to flex items.

Flex Direction

You can also set the direction of each flex item inside the flex-container using the flex-direction property.

There are 4 available values for flex-direction property:

1. row – This is the default value. This will set the direction of flex-items from left-to-right and top-to-bottom.
2. row-reverse – sets the direction of flex-items from right to left.
3. column – sets the flex items vertically.
4. column-reverse – sets the flex items vertically but in a reverse manner.

Let’s see this in action.

On the example above, we set the flex-direction of the flex-container to row-reverse which means setting up the flex-items order from right to left.

There are lots of properties to tackle with flexbox, but this will get you started. If you want to learn more about flexbox, you can visit this article.

Wrapping Up

CSS3 features offer amazing effects and output that let an element gradually change from one style to another and may load faster depending on the hosting you use. They are very helpful if you’re not a programmer and want to create a simple, smooth effect.

The post The Cutting-Edge CSS3 Features That Are Essential to Modern Web Design appeared first on Speckyboy Design Magazine.