Featured
-
Responsive Web Design and Responsive Frameworks
In this session, we will learn about Responsi
by rakesh.pant -
HTML5 Responsive Design - ViewPort Meta Tag (Part 3)
Hi again, In this article, we’re goi
by rakesh.pant -
HTML5 Responsive Design - Media Queries (Part 2)
In the previous session, we learnt the basic
by rakesh.pant -
HTML5 Responsive Design - Media Queries (Part 1)
Overview Media Queries, a mainstay of Resp
by rakesh.pant
Tags
CSS Star Rating
Hey Readers!
We visit uncountable web pages in a day. We read reviews, news, blog posts etc.
In many of these pages, you might have seen a star rating.
A star rating consists of a series of stars. A star rating is required to know the us...
Creating a Tic-Tac-Toe Game Using CSS
Hello readers, Well all love to play games whether a child or an adult. So here in my blog I have tried to create a game which we all have played in his/her life in their childhood days.
So, I have created it using CSS properties , h...
CSS Filters
Hey Readers :)
We apply different in-built filters to our day to day pictures. Some of these filters, if not all, can be applied to the images we use in our websites with the help of CSS. This is done by the CSS property filter.
CSS Filters...
Inner border over images with CSS
Hello Readers!
We have all applied borders of all types on the outside of an image, a div, a text etc. Let us look how to do the exact opposite of this i.e. applying a border on the inside (here, an image).
The result should look something ...
Vertical Wizard in CSS
Hello Readers!
In this blog post, we will be preparing a vertical wizard. A wizard is commonly seen on shopping websites (while placing an order) or when we fill a form. A wizard shows us the various steps we have to complete before fulf...
How to create keyframe animations using css3?
In this blog, we will learn how easy to create rotating and translating images by using css3 keyframes, here we will create spinning wind turbine and a blue sky with clouds floating in the background.
In this example I have taken images of clo...
CSS3 Spinning Loader
Hello Readers, here is a small blog on spinning loader, when we visit any website we have seen loader at the time of loading website. these preloaders are the visual feedback while the content is being loaded. In this example, I have taken&...
A Creative Link With Hover Effect Using CSS3
Hello readers , Today's in my blog I have created a Creative Link with hover effect using CSS3 transition ,transform and translate property and have also made the use of pseudo-elements before and after.
In my blog I have tried t...
Overview of Flex box CSS3 with demo
It is so called the new layout which is given by CSS3.
It is an improved version of our native block model in which we uses float properties.
It mainly consists of two main thing.
1. Flex container
2. Fex items
1. Flex container - ...
How to make rotating cube in html5 and css3
Hello Readers, Here is a blog on making a rotating cube. For this we will make an HTML page and a CSS page. First, make an HTML page named index.html and write the below code.
<html>
<head>
<title>Rotating Cube</ti...
How to rotate in CSS3 around its axis
Hello, readers, this is a small blog on how to rotate in CSS3 around its axis. To achieve this we will make a file index.html. Copy the below-written code in this file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf...
Parallax Scrolling
Hello Readers! In today's blog we discuss about the technique which is in biggest trend on the web for some time now, that is , parallax scrolling! In web design use, parallax is referred as the scrolling technique which is used to create the...
Spinning Preloader
Hello reader's, we all have seen preloaders whenever we visit any website, at the loading time it appears at the window panel. I have just tried to create a preloader using bright colours with a punch of animation over it which therefore seem...
How to set portrait and landscape media queries in css
If you want to set your view for a specific device, you need to use media query css to get that.
To set css for landscape and portrait view, you need to add the following lines into your css file.
@media only screen and (orientation: land...
How to make slide check box in html using CSS?
Hello Reader's if you are looking for slider design of checkbox then this blog will be helpful to you.
Lets see how to make checkbox with slider desing.
First we will create the html file and it's code will go like this:-
<div>
...
How to make multi color placeholder for input controls in HTML5 and CSS3
Hi all,
While designing a form in html with CSS3, I came across a situation where I have to set the color of asterix sign which was a part of placeholder in textbox input type and to do that with CSS3, I used to following block of code:
in ...
How to put text align to veritcal using CSS 3
Hello Reader's if your are looking for the code to write the text with alignment upward, Then you can use the code css as below:-
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb...
How CSS triangles work?
Hello folks,
How css triangle works ? actually when we create css triangle, its means we are just showing and hiding borders of any element.
The angle intersects at (45) so the intersection edge is used by border here and we can also skew a...
Alert classes
how to make alert messages in bootstrap.
Bootstrap prvoides an predefined class .alert for creating alert messages which can be customized according to the requirement.
Alerts are created with the .alert class, followed by one of the four co...
How to set half color on text ?
Hi all,
Below is an example how to make half color on text using css. In this example we are using custom-attribute.
If you are looking for custom-attribute, In one my previous blog I have explained about it click custom-attribute to know m...
Underline hover effect using CSS
Hi all,
In this, I am showing a simple hover underline effect using pseudo elements and just set transition at .3 second make width 100% on element hover.
See the below code with output -
CSS:
a, a:visited {
text-decoration: none;
...
Simple loader using pure CSS
Hi all,
Below is an example of pure css loader. Using css animate I just rotate the div and change the border radius. Check the code for details.
CSS :
div {
height: 20px;
width: 20px;
background-color: transpa...
Uses of CSS prefixes
Hello all,
Mainly prefixes are used for css3 properties which is experimental or non standard CSS properties, this tells to different browser
Mostly we avoid the prefix but sometimes if you are not using prefix, your css3 properties will no...
How to change placeholder color ?
Hi all,
Many time we need to change the input placeholder color or style so here is an pseudo element ::placeholder which can helps you. placeholder defult color is gray with 0.6 opacity so if your input background color is dark in gary, you...
what is clearfix?
Hello readers !
Today We will discuss about clearfix
If you have any floating div inside a container and want to clear the floats normally you may are using clear:both class because this is simplest and most common way to solve this. But it...
SVG Shapes
Hello Readers,
Today's topic is how to create a SVG?- Every shapes in SVG are based on coordinates (x and y axis). So if you want to edit ,create and script, you have to know about coordinates.
SVG has pre define shape like,
1) Circle ...
How to use SVG in html
Hello Readers!
In this blog we will discuss about SVG.
Scalable Vector Graphics (SVG)? is a type of image format, which is based on XML. SVG makes a vector graphic quality in such a way that the graphic quality will not become dull if you zo...
Sticky footer using pure css
Hello folks!
The below code is an example of sticky footer using pure CSS. There are other sticky footer methods, which people use but the problem arises that they do not work with all browsers so the method I am providing below will work with...
Useful Short Hand and CSS Rule Set
Hello readers,
Below is some useful example of css rule set and css shorthand. By using css shorthand you can save your time.
CSS rule set-
Rule set for font declaration:-
body {font: italic small-caps normal 13px/150% Arial, Helvetica...
Use of Box Sizing
What is box-sizing ?
Box-sizing is a css3 property. It is used to tell browser that width padding border should include the object according to size, which is define by user.
For example, you have a text area with 100% widt...
css3 animation game
Duck game using pure CSS3
Hello all,
Below is an example of pure CSS3 game using CSS3 animation, pseudo class. This example show efficiency of CSS3.
There is no .gif image used. Find the attachment for complete code below.
*{margin...
Aimated Text shadow by CSS 3
Hello,
Bellow is a animation showing shadow of a text moving relative to the movement of the light.
<!doctype>
<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Anton);
html {
height: 1...
How to use transform property of css3
Hello Readers !
In this blog we will discuss about css3 new attribute transform and transition.
Okay let's start :-
Transform : Mainly transform property uses for give small animation or movement of any object.
To use this you have to...
How to use transform-rotate property in CSS3?
<!DOCTYPE html>
<html>
<head><title>css3</title>
<style>
div
{
width:200px;
height:200px;
margin:80px;
background-color:#000000;
/* Rotate div */
transform:rotate(60deg);
-ms-transform:rotate(60deg)...
