Short Intro of jQuery Inbuilt Methods for Handling CSS

Published September 26, 2017 by saurav.roy.

Manipulating the UI style or CSS at runtime is a very common project. With plain JavaScript, adding and removing CSS classes or inline stylings of the matched element can be tricky. Luckily, jQuery has some inbuilt methods to make this whole process effortless! The methods are .addClass(), .removeClass(), .hasClass(), .toggleClass() and .css(). The names of these methods are self-explanatory and give you some insight into their functionality. In this short post, we’ll look at each of these methods in action.

.addClass()

The .addClass() method simply adds the class to any element. It doesn’t replace a class, it simply appends. To add a CSS class to any element,

$("#elm").addClass("myClass");

This method adds a class attribute to the selected element. You can also add multiple CSS classes in one go. Just separate the class names with a space. Like,

$("#elm").addClass("myClass myClass2");

.removeClass()

The .removeClass() method removes a single class, multiple classes, or all classes from each element in the set of matched elements. Like,

$("#elm").removeClass("myClass");

If you don’t supply any class name, then all the CSS classes applied to the matched element will be removed. Like,

$("#elm").removeClass();

.hasClass()

If you want to check if a CSS class is assigned to an element or not, use the hasClass() method. This will return true or false. Consider the following HTML,

<div id="elm" class="dummy"></div>

The following jQuery code will return true:

$("#elm").hasClass("dummy");

This is quite useful in cases where, based on certain conditions, you need to take further actions.

.toggleClass()

The .toggleClass() method is a combination of the .addClass() and .removeClass() methods. This method takes one or more class names as its parameter. It first checks if an element in the matched set of elements already has the class, then it is removed. If an element does not have the class, then it is added. Consider the following HTML,

<div id="elm" class="dummy"></div>

The following jQuery code attaches toggleClass() method to the div element.

$("#elm").toggleClass("dummy2");

When this code runs for the first time, it adds dummy2 class to the div element because the original element didn’t have it. So the HTML becomes,

<div id="elm" class="dummy dummy2"></div>

When the same jQuery code runs for the second time, it removes dummy2 CSS class from the div element and the HTML reverts back to the original,

<div id="elm" class="dummy"></div>

.css()

All the above method deals with the class attribute, but the .css() method is used for inline style. It adds and removes style attributes for the selected element. For example, to change the background color to red,

$("#elm").css("background-color", "red");

This will add the style attribute to the element. Like,

<div id="elm" style="background-color:red;"></div>

Using this method, you can also set multiple CSS properties in one call. Like,

$("#elm").css({
 "background-color", "red",
 "color", "black"
 });

Or get the value of any CSS property. Like,

var backColor = $("#elm").css("background-color");

To remove any inline CSS property, simply pass an empty string. Like,

$("#elm").css("background-color", "");

Bonus tip: If you want to completely remove the inline style attribute, then use the removeAttr() method,

$("#elm").removeAttr("style");

Conclusion

This post provides a brief insight into various inbuilt methods available in jQuery to play around with CSS or inline element styling. These methods can add, remove or toggle the CSS classes or inline style. Using these methods can save a lot of development time and creates a clean code. Definitely worthy of your jQuery toolkit!

Share and Enjoy !

0Shares
0 0

Make Beautiful Hyperlinks Using CSS

Published September 4, 2017 by saurav.roy.

A beautiful website design addresses every single aspect and element of the website, whether big or small. Small animations and beautifully designed elements can immensely improve the overall user experience and can take the whole design to a new level. Hyperlinks – or anchor tags – are an important element in any website and it’s the only way to display internal or external links on the website. By default, without any CSS underlines and blue coloring will be there for anchor tag and a hand pointer mouse icon on hover. Traditionally, the default design has been followed with some additional CSS to apply different styles for underlining or different colors. Things are not the same now with CSS3 as it offers a lot more to explore in terms of new designs and animation elements.
With a little help of CSS3, the hover effect on hyperlinks can be more beautiful, interactive, and eye-catching. This post provides CSS3 solutions for applying different hover effects on the hyperlink element. Let’s begin!

Smoothly Change the Color

CSS3 has a property called “transition” which allows you to change property values smoothly from one value to another over a given duration. It animates the property changes rather than applying them immediately. Consider the following HTML:

<a id='color' href="#">Color changes smoothly</a>

The traditional way to change color on a hover event is:

#color:hover {
color: purple;
}

This would change the color immediately on mouse over. But the CSS3 transition property makes this whole process smooth. The following CSS class will apply a color transition over 0.9 seconds.

#color:hover {
transition: color .9s;
color: purple;
}

You can check out a working demo here to see the difference. Likewise, you can also change the background color smoothly using the following CSS:

#backColor {
text-decoration: none;
padding: 0 5px;
transition: all .9s;
}
#backColor:hover {
color: #fff;
background-color: green;
}

In the above example, both the background and color property will transition due to the value “all” specified for the transition-property. You can check out a working demo here.

Increase the Font Size

To add an increasing font-size animation, you don’t have to set the font-size CSS property. You can leverage CSS3’s transform property to scale out the text to an extent, resulting in an increase in font size effect. The following CSS code uses transition and transform properties to scale out:

a {
display: inline-block;
transition: .3s;
font-weight:bold;
text-decoration:none;
}
a:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

You can check out a working demo here.

Flip the Anchor Link Text

Flipping the text on hover is one of my favorite animation effects. The flip effect looks good on a text element when it gets completed quickly. To make this flip animation smooth, put your anchor text in a span element like:

<a href="#"><span>Flip me...</span></a>

The following CSS code will implement the flip effect on the anchor tag hover event. Assign a rotate value to transform property to rotate the text by 360 degrees to create the flip effect.

a,
a span {
display: inline-block;
}
a span {
transition: .5s;
}
a:hover span {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}

You can check out a working demo here.

Add Border Around the Anchor Text

Adding a border around the anchor text and descaling the text so that it can fit inside the box is another cool way to have a hover animation. The following CSS code attaches a hover event to the anchor tag elements and using the ::before CSS selector, it attaches a box around the anchor text. The ::before selector inserts something before the content of each selected element(s). You need to use the content property to specify the content to insert. For example:

a {
color: #741c7c;
font-weight: 500;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
display: inline-block;
text-decoration: none;
position: relative;
}
a:hover {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
a::before {
position: absolute;
top: -2px;
left: -7px;
box-sizing: content-box;
padding: 0 5px;
width: 100%;
height: 100%;
border: 2px solid #741c7c;
content: '';
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
a:hover::before {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

You can see the above code in action here.

Put Anchor Text Inside an Animated Rectangle

The previous CSS code creates a border around the anchor text, but it can also be enhanced to put the anchor text inside an animated rectangle. The animated rectangle appears as a zoom-in effect and covers the anchor text. The following CSS code uses the ::before selector to create a solid rectangle around the anchor element which becomes visible using the hover effect. The transition property adds the transform effect to scale the rectangle which makes a zoom-in effect:

a {
color: #e74c3c;
font-weight: 500;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
display: inline-block;
text-decoration: none;
position: relative;
}
a::before {
position: absolute;
top: 0;
left: -10px;
z-index: -1;
box-sizing: content-box;
padding: 0 10px;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #fff;
content: '';
opacity: 0;
-webkit-transition: -webkit-transform 0.4s, opacity 0.3s;
transition: transform 0.4s, opacity 0.3s;
-webkit-transform: scale(0);
transform: scale(0);
}
a:hover::before
{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

You can see the above code in action here.

Create Square Brackets Around the Anchor Text

The following CSS code adds square brackets around the anchor text on hover. The square brackets appear as a slide-in effect. To append the square bracket the CSS uses ::before and ::after selectors; inside those selectors it defines the position of the bracket from the anchor text. You can easily change the square brackets to any other characters or different type of brackets by modifying the ::before and ::after selector.

a {
color: #213999;
font-weight: 500;
-webkit-transition: color 0.2s;
transition: color 0.2s;
transition: transform 0.2s;
display: inline-block;
text-decoration: none;
position: relative;
padding: 0 0.25em;
}
a:hover {
color: #d04c3f;
}
a::before,
a::after {
position: absolute;
top: 0;
font-weight: 100;
font-size: 150%;
line-height: 1;
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
}
a::before {
left: -0.1em;
content: '[';
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
a::after {
right: -0.1em;
content: ']';
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
a:hover::before,
a:hover::after {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}

You can see the above code in action here.

Tilt the Anchor Text

Tilting the anchor text on hover can easily get a user’s attention. To create the tilt effect, all that’s required is to rotate the link text to some degree using CSS3 transform property. The transition property can define the duration for completing the tilting effect. The smaller the value, the slower it will be. The following CSS code does exactly the same thing. Based on your requirements, you can change the degree value to manipulate the tilt impact:

a {
display: inline-block;
transition: .3s;
text-decoration: none;
}
a:hover {
transform: rotate(15deg);
color: green;
}

You can see the above code in action here.

Fade-in the Underline

When no CSS is applied to the anchor tag element an underline will appear. You can manipulate this default behavior and make it more appealing by applying a fade-in effect for showing the underline. The following CSS code initially hides the underline by setting “none” to the “text-decoration” property. It also uses the ::after selector to create an underline below the anchor text and then on hover the effect changes its opacity to 1 to display it on screen.

a {
position: relative;
display: inline-block;
transition: .3s;
text-decoration: none;
}
a::after {
position: absolute;
bottom: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: green;
opacity: 0;
transition: .3s;
}
a:hover::after {
bottom: 0;
opacity: 1;
}
a:hover {
color: green;
}

You can see the above code in action here. If you want that underline to appear on top of the anchor text, then you need to change the ::after selector to a ::before selector. Remove the ::after selector CSS classes and use the following CSS classes to put the line on top of the anchor text instead:

a::before {
position: absolute;
top: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: green;
opacity: 0;
transition: .3s;
}
a:hover::before {
top: 0;
opacity: 1;
}

You can see the above code in action here. To show top and bottom both at the same time on hover, use this next block of CSS code. This code makes use of ::after and ::before selectors both to create a line on the top and the bottom of the anchor text.

a {
position: relative;
display: inline-block;
transition: .3s;
text-decoration: none;
}
a::after,
a::before {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: green;
opacity: 0;
transition: .3s;
}
a:hover::before {
top: 0;
opacity: 1;
}
a:hover::after {
bottom: 0;
opacity: 1;
}
a:hover {
color: green;
}

You can see a demo here.

Conclusion

To conclude, this post provides different CSS3 solutions to animate or change the UI design of the anchor tag element on hover event. Using these solutions, you can easily change colors, increase the font size, flip the text, create a border around the text, put a rectangle or square brackets around the anchor, tilt the text, and manipulate the underline. These solutions are self-explanatory and easily understandable with a little knowledge of CSS3. These solutions can also be used as a reference or guide to create new hover behaviors.

Share and Enjoy !

0Shares
0 0

The Very Best 4 (Active) CSS Lint Tools

Published August 22, 2017 by saurav.roy.

Introduction

Linting tools help improve the code quality and optimize it for better performance. Linting tools have sets of defined rules to verify the code, without actually executing the code. Web designers often overlook the CSS code quality and unstructured coding style. As the product grows, this can create a real mess and usually results in a lot of difficulty finding and fixing the issues. You will find many articles with lists of CSS linting tools, but unfortunately most of the tools are no longer available. Hence, this post talks about the 4 best ACTIVE CSS linting tools which you can leverage to validate and optimize your CSS code. Enjoy!

  1. CSSLint

http://csslint.net/

CSS Lint is an open source CSS code quality tool to find out problems with your CSS code. It was released in June 2011 at the Velocity conference. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want. It is written in JavaScript which runs the whole CSS linting process.

CSS Lint can be easily integrated with your favorite IDE to make checking your CSS code quality easy. CSS Lint can be run on the command line so you can incorporate it into your build system.

CSS-lint-tools

  1. StyleLint

https://stylelint.io/

StyleLint is a mighty, modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in your stylesheets. It features:

  • Over one hundred and fifty rules to catch errors, limit language features and enforces stylistic conventions.
  • Support for the latest CSS syntax
  • Understands CSS-like syntaxes
  • Only enable the rules you want and configure them with options that tailor the linter to your needs.
  • Support for creating your own rules and add them to the linter.
  • Automatically fixes some stylistic warnings
  • Shareable configs
  • Over ten thousand tests cover the internals and rules.
  • Large growing community and used by major companies like Facebook, GitHub, Wikimedia, GSA, and WordPress among others.

 CSS-lint-tools

  1. CSSNano

http://cssnano.co/

CSSNano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately. It takes your nicely formatted CSS and runs it through many focused optimizations, to ensure that the final result is as small as possible for a production environment. By default, CSSNano performs safe optimizations on your CSS file, but we also offer an advanced preset with techniques that you can use to maximize compression.

CSSNano is powered by PostCSS, a tool for transforming styles with JavaScript. This allows you to insert CSSNano into your build step, along with other processors that can lint your CSS for errors, or transpile future syntax.

CSS-lint-tools

 

  1. Dirty Markup

https://dirtymarkup.com/

Dirty Markup is a free web-based application for cleaning up such code very easily. It cleans, formats, and validates HTML (5), CSS and JavaScript by using the powers of the popular HTML Tidy, CSS Tidy and JS Beautify. The newest version also offers free public API which you can use to clean your code programmatically from your own app or plugin. It can be also a great option to validate your CSS on the fly. The provided editor is simple and provides real time error messages and notifications.

CSS-lint-tools

Conclusion

Optimized CSS code is a must for any website for best performance. The CSS linting tools help create clean, validated and optimized code based on predefined sets of rules. This post briefly talk about 4 of the best actively maintained CSS linting tools to help you write better CSS code.

Share and Enjoy !

0Shares
0 0

12 Responsive CSS grid systems

Published December 6, 2015 by saurav.roy.

A grid system provides designers with a structure to present their work in a much more manageable and readable way.
The grid systems helps in attaining a level of consistency in designs throughout a site. Here are 12 responsive CSS grid systems that help to make sites more more responsive, beautiful and organized.

1. Motherplate

This is a bare bone CSS3, HTML5 and SCSS responsive boilerplate that doesn’t support any visual components or stylings.

css-grid-systems

2. 1KB Grid

This is a simple grid system designed to use Sass and to remove classes from the HTML mark-up to make customization easier. It is inspired by the 1KB CSS Grid design. Now it has been extended to support fluid grids as well.

3. Bourbon Neat

Built on top of Bourbon and Sass, this CSS grid system is a semantic grid framework. With its simple design, it has the ability to handle any type of responsive layout.

css-grid-systems

4. Gridism

This is a simple and easy to use grid system. Grid units are stacked on screens smaller than 568px. On large screens the grids can have a width of 978px or 1140px.

css-grid-systems

5. Responsive Grid System

This grid system is designed for fast and intuitive development of responsive sites. The Responsive grid system is made available in 12, 16 and 24 columns. It is a fluid CSS framework available with media queries for different devices, clearfix and optional reset.

css-grid-systems

6. Skelton

This responsive CSS grid system is used to develop sites that look beautiful on screens of any size. It is a collection of CSS files and is built on three principles – fast to start, responsive grid down to mobile and style agnostic.

css-grid-systems

7. Unsemantic

As a successor to the 960 grid system, this fluid grid system works in a similar way. The only difference is that instead of a set number of columns, it is based on percentages.

8. Less Framework

Developers can design adaptive websites using this CSS grid system. Less Framework consists of 3 sets of typography presets and 4 layouts, completely based on one grid. Using this framework designers can build a website with multiple layouts and make it look more efficient.

css-grid-systems

9. Herow

This Sass grid system saves time and provides designers with mixins that are easily customizable and simple to use. In order to deal with responsiveness problems, it also provides atomic mixins. Along with these, designers can also play with it in CSS by generating atomic classes.

10. ChewingGrid

ChewingGrid allows designers to add a view that looks like a card listing template. This can be used to arrange videos, pictures or articles in a card view. Users can adjust the width of the card and also the number of columns that they wish to display. It can also be used to build custom semantic grids.

css-grid-systems

11. One % CSS Grid

This grid system allows designers to create responsive web layouts quickly with ease. This is a percentage based 12 column grid system. It has only two start options, the one which fits 1024px and the other one that fits 1280px.

css-grid-systems

12. Fluid Baseline Grid

Built with typographic standards, the Fluid Baseline Grid system combines the principles of baseline grids, fluid column layouts and responsive design into a device agnostic and resolution independent framework. It features beautiful typographic standards, common browser inconsistencies, CSS normalization, corrected bugs and better usability.

css-grid-systems

Share and Enjoy !

0Shares
0 0

10 Awesome CSS tools for designers

Published November 17, 2015 by saurav.roy.

It is essential for developers to use design tools to increase their knowledge and get projects completed faster.

Here are 10 tools which will be of great help to CSS designers. Using these tools can minimize the effort and time that a developer must put into designing a web page.

1. Stylizr

This CSS tool helps to design anything within a fraction of seconds. To include different styles on a web page easily use Skybound.

css-tools

2. TopStyle5

TopStyle5 is for Windows users. Designers who use the Windows OS and design their web pages based on HTML5 and CSS3, can make use of this tool. It is considered to be a powerful editing tool for the those languages.

css-tools

3. CSS3Pie

Progressive Internet Explorer (PIE) supports Internet Explorer 6-9 and makes it capable of providing many of the most useful decorating features of CSS3.

css-tools

4. Rapid CSS Editor

This tool makes it easy to create and edit modern sites which are based on CSS. Developers can write the CSS code themselves or have it written by the style sheet editor. Auto complete, CSS checker, code inspector and instant built-in multi browser preview are a few awesome features offered by this CSS tool. The main goal of this tool is to simplify tasks and save time.

5. deSVG

Developers can use this tool to remove the inline SVG bloat from HTML documents. It can also be used to create SVGs with CSS.

css-tools

6. CSS Menu Maker

Make awesome menus using this CSS tool. The menus built using CSS Menu Maker are clean and responsive. All the menu designs provided here are free to download and use. This tool is really helpful, to those who prefer to work with source codes.

css-tools

7. Coda

Web coders look for a clean, fast and powerful text editor. Coda fits the bill. It also provides users with a pixel-perfect preview and a built-in way through which developers can open and manage files – both locally and remotely.

8. SimpleCSS

This is a free CSS authoring tool which downloaded to create style sheets easily. SimpleCSS is available for both Windows and Mac OS X.

9. Espresso

The features provided by this CSS tool are perfect to turbo-charge workflow. It also allows users to prevail over complicated documents by using the navigator and code folding. Users can also live style pages, visualize layouts with x-ray, and then save the changes with quick publish or sync.

css-tools

10. SkyBlue

This tool is a minimal framework that can act as a starting point for projects. It uses a grid system consisting of 12 columns. SkyBlue is free to download and use for both personal and commercial projects.

These are 10 CSS tools, which every designer can use to enhance the quality of their web pages. They decrease workload and save precious time.

Share and Enjoy !

0Shares
0 0

5 Awesome CSS hover effects and their codes

Published August 30, 2015 by saurav.roy.

Everyone loves to visit a responsive site which appears to be alive. CSS hover effects helps developers to do just that. It allows users to easily animate the images or texts of a website, making them more dynamic in appearance and it is supported by all browsers as well.

1. Bump Up

One of the coolest CSS hover effects which plays best with a set of similar horizontal images, Bump Up creates the illusion of a wave with images when set side by side. Just move the mouse over the line of images and it will bob up and down, giving users the feel of something floating on water. Bump Up can be done easily by starting off with a particular margin size and reducing it on hover.

Using transition to bring out the effect further smooths it down, however, this can be avoided and depends on what you choose. The same effect can also be done on texts, provided they are listed.

Code : .ex1 img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; } .ex1 img:hover { margin-top: 2px; }

css-hover-effects

2. Stack & Grow

Stack & Grow takes the vertical approach while creating a wavy effect making it look like the liquid  in lava lamps. This effect is super easy to achieve. Choose similar images and stack them up vertically. Make sure they have different marginal areas.

Once they are stacked up, simply expand them on hover and voila! The cool lava lamp effect is achieved. The expansion sometimes changes the alignment of the images which can be recreated by the use of negative scaling. Usually scaling the margin to half of the original on the negative side restores the alignment.

Code : /*Example 2*/ #container { width: 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #ex2 img:hover { height: 133px; width: 400px; margin-left: -50px; }

css-hover-effects

3. Fade Text in

Want something magical? Where things appear out of nowhere when you touch or click certain parts? Wouldn’t it be cool if you could do the same on your website too? Like making some text or image appear out of the blank when you click certain other part of the website? It can be done the help of Fade Text in. This awesome CSS hover effect is simple to create and allows text to appear on the screen.

All you need to do is insert the text, convert the color of the text to transparent and the height of the line to 0px which will make it vanish. Then change the color and height when on hover. This will make the text reappear when you hover your mouse over the image.

Code : #ex3 { width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex3:hover { line-height: 133px; color: #575858; } #ex3 img{ float: left; margin: 0 15px; }

css-hover-effects

4. Crooked Photo

This effect is a great choice for the display of thumbnails. When there are many images displayed as a thumbnail on a website,  just hover on a particular one and it would appear like a crooked wall hanging which will grab the viewer’s attention.

The crooked photo effect can be achieved by the use of transitions (optional) and it also gives users the liberty to play around with it. Designers can change the direction of leaning of images with the aid of pseudo selectors.

Code : #ex4 { width: 800px; margin: 0 auto; } #ex4 img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex4 img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

css-hover-effects

 

5. Fade In and Reflect

Ok! So we have saved the most complicated one for the last. This CSS hover effect is a bit tough to achieve, but it looks so amazing that it is worth the hard work. If you have images which are formed in the thumbnail formation, you need to reduce the opacity of all the images at large. When you hover over to a particular image, the opacity regains its normal value and the image appears brighter than the surrounding.

It is further enhanced by the reflection that is formed at the bottom of the image. The reflection, however, does not respond to the transition and which leaves little room for customization.

Code : #ex5 { width: 700px; margin: 0 auto; min-height: 300px; } #ex5 img { margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } #ex5 img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }

css-hover-effects

Article Source : DesignShack

Share and Enjoy !

0Shares
0 0

9 Free online courses to learn CSS 

Published July 30, 2015 by saurav.roy.

Much of the world’s business is now being done on the Internet with people using mobiles, tablets,  or laptops looking for news, online shopping, video chats, office documentation, recipes, booking restaurants, reviews of school, locating doctors or even playing games. Our world has shrunk to the 6” inch screen allowing website development companies to multiplying and earn big money.

For those looking to start their own website, learning HTML5 and CSS is a must. They are bread and butter for any developer. But the best part of HTML and CSS is that they are not very hard to decode. The coding is very simple and can be learned quickly, especially if developers take advantage of the free online courses available. Here is a list that will likely help any would-be developer become a pro in very little time.

1. CSS Basics

This is the best course to brush up on the basic skills of using CSS. There are around 18 chapters which explain each topic carefully with lots of examples.

css-online-courses

2. CSS Tutorials

These are a collection of tutorials to prepare developers for advanced use of CSS.  Here developers will learn how to control the style and layout of multiple web pages all at once. There are examples in every chapter.

css-online-courses

3. CSS Beginner

The tutorials in CSS Beginner are written in a way to help people who know HTML and want to build on that knowledge. The tutorials have a lot of content to help beginners become proficient.

css-online-courses

4. CSS Basics: WordPress Style

WordPress is still the most popular platform for creating websites. This tutorial will explain how to incorporate CSS into the WordPress theme. It also helps developers convert a website easily into a mobile App after going through the tutorial.

5. Don’t Fear the Internet

This website is filled with data to teach beginners how to make a WordPress blog and then tweak CSS and HTML to bring ideas to life.  The tutorial is presented in a very humorous and user friendly tone making it very interesting even in midst of some complicated codes.

css-online-courses

6. An Advanced Guide to HTML and CSS

An Advanced Guide to HTML and CSS provides students with knowledge on the more advanced features of the CSS coding to develop the front end much better. It will teach users responsiveness, transformation, jQuery, preprocessors and animations.

css-online-courses

7. CSS Cross-country

This is for the people who already have beginners and intermediate knowledge of CSS. Here the authors provide videos for more advance learning and fun-filled activities. Users can earn points with every completed challenge.

css-online-courses

8. Smashing Magazine’s CSS Coding

Smashing Magazine’s starts with some basic information and then moves to more advance learning. It teaches how to get background images and about moving from PSD to XHTML. It teaches various effects and animations in a fun way with examples.

css-online-courses

9. Dev.Opera CSS Basic

This online tutorial teaches all the technical aspects of CSS. It covers topics from what is CSS to defining various styles, animation and effects in the text.

css-online-courses

 

Share and Enjoy !

0Shares
0 0

11 Useful Free CSS Codes for Web Developers

Published May 7, 2015 by saurav.roy.

Thanks to recent advances in technology, developers no longer have to start a website from scrtach. There are many HTML/CSS-mark-ups which have templates that can be used to kick-start a website development project.

HTML5 /CSS3 have multiplied the scope of website designing possibilities. With numerous codes available for various things like animation files, headers, hover effects, fonts styles and different type of loaders, developers can be creative. There are various CSS menus, layouts, templates, resources and references available free of cost. Most come with step-by-step instructions on how to use them or provide tutorials.

Below is list of some of the CSS codes which are free to download and can be used to style the webpage. These codes just need to be pasted in the HTML code and directly used. No need to learn about JavaScripts or query to use them.

1. Hover Effect

This CSS code offers many beautiful hover effects from changing the image to changing color tone or even the appearance of the data. The effects appear in boxes or vertically and horizontally.

css-codes

2. Animated Text Fills

With Animated Text Fills developers can select a portion of text and add some animation into it. It could be in form of animated stoke patterns or color changes or animated shapes.

css-codes

3. Material UI

Material UI is a complete CSS framework and a set of react components that implement Google’s material design. Developers can go through the react library to learn more about Google material design and start using this code. It is available as npm package. Material UI components have their styles defined inline. Choose one of two approaches to override these styles: overriding individual component styles or define a theme to apply approaching style changes.

css-codes

4. Tumblr –Style COG Loaders

This code uses animation for loading in tumblr style with CSS and SVG icons designed by Jiri Silha. Developers can use their favorite method to make the image disappear when the content is loaded.

css-codes

5. Jeet

Jeet is a code for writing grid system. Developers need not define the nesting elements or the twelve column rules. They can build the grids faster, with more flexibility and less code.

css-codes

6. Item Transition Inspirations

This code is for creating awesome item transitions. Developers can choose a suitable effect amongst a huge list which includes shuffle, snake, coverflow, Ferris Wheel, vertical scale and many more. There are three options for applying the effect small component, full width or transparent for the image to be displayed.

css-codes

7. Stack Effect

Here developers can get code for some simple inspirations for stack interaction. They can choose from fan out, random rotation, side slide, side grid, peek-a-boo, preview, corner grid, bouncy grid and leaflet.

css-codes

8. Loading Effects

This code helps developers understand that loading effects need not be restricted to a tiny indicator. Some of the effects are 3D Bar Bottom, Fill Sides, Flat Top Bar, Pie Timer, Big Counter and expanding box.

css-codes

9. Textured Text

Here developers can get techniques for creating textured texts with CSS. There are eight or nine styles developers can choose from.

css-codes

10. Single Element CSS Spinners

Here are few of the CSS spinners which can be used to show the time taken for downloading.

css-codes

11. CSS responsive tabbed navigation

With this code developers can add tabbed navigation which will be responsive according to the screen size.

css-codes

Share and Enjoy !

0Shares
0 0

7 Useful Free CSS Editors for Linux

Published by saurav.roy.

Web developers crave a good code editor or what is known as an Integrated Development Environment. Although Linux is often considered complex and at times pretty puzzling, in reality it has more functionality than any other OS available and most of the master web developers use it for developing their programs. If we consider all the languages that are available for web development, nothing can compete with the popularity of CSS.

However, when it comes to the CSS code editors, many of them are available for free on the net including Linux. Here are some of the best CSS code editors for Linux.

1. CSSed

With features like dialog-based insertion of CSS complex values, syntax highlighting, syntax validation, quick CSS properties and values insertion and MDI notebook based interface, CSSed is an open source CSS Linux based editor which means designers can download the editor and the source. It’s an editor that will validate information which makes editing easier.

2. Cream

Cream is an easier version of Vim that converts Vim into an already known interface which is far more convenient to use. Vim was created for use by only the pros and had a steep learning curve which couldn’t be overcome by all designers. Cream combines all the functions of Vim but is easier to use.

linux-css-editors

3. jEdit

Meant for mature programers, jEdit is packed with functions. Developers can go to the Quick Start page of jEdit to download and install the program quickly within minutes.

4. Scintilla

Available for both Windows and Linux operating systems, Scintilla is an open source CSS code editor which makes editing super easy for the developers. Apart from being a generally used editor, Scintilla also allows the developers to build and run the programs.

5. Kompozer

Combining WYSIWYG web page editing, which is super easy to use, and web file management, Kompozer provides you with a complete web authoring system. It doesn’t require the use of HTML or web coding and is made with non technical web developers in mind. It helps create beautiful web sites without the complexities.

linux-css-editors

6. Gedit

Gedit is an easy to use CSS code editor available for Linux which is simple yet pretty powerful. It has notable features such as a flexible plug in system which can be used to dynamically add new advanced features, current line highlighting, full support for internationalized text, editing files from remote locations, auto indentation, text wrapping, line numbers, bracket matching and backup files among others.

linux-css-editors

7. Quanta

With its normal and advanced features, Quanta is gradually becoming one of the leading Linux based CSS code editors on the market today. Its objective is to simplify editing for developers. It offers features like multi-document interface, templates and WYSIWYG editing. Quanta plus also offers a range of advanced features to play with which include team development, plug-in support and a PHP debugger.

Linux based developers who use CSS for projects should find these editors an immense help. Do not forget to comment and let us know about other code editors which can benefit developers.

Share and Enjoy !

0Shares
0 0

15 New Awesome Creative CSS Animations  

Published May 2, 2015 by saurav.roy.

CSS animation software allows web designers to develop creative animations with advanced CSS tools that includes multimedia formatted images. We have gathered some of the latest, best and creative CSS animations that designers would love to put on their own websites.

1. Fake Fruit Shop

css-animations

2. Google Now 3rd Party Apps

css-animations

3. Menu Icon Animation

css-animations

4. Elastic SVG Sidebar Material Design

css-animations

5. The Ultimate Hamburger Menu

css-animations

6. Animated Background Gradient

css-animations

7. Chrome Dinosaur Animation

css-animations

8. 3D Walking Robot

css-animations

9. 404 Animated Character

css-animations

10. CSS Loading Animation

css-animations

11. Hamburger Icon CSS3 Only Animation

css-animations

12. CSS The Avengers

css-animations

13. Particle Button

css-animations

14. Cruisin’

css-animations

15. Signature Animation

css-animations

Hope you like all the creative CSS animations that we have researched for you. If you have developed any new creative CSS animation, do let us know and we would love to feature it on our website.

 

 

Share and Enjoy !

0Shares
0 0