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
Flexbox layout for Header Navigation
Here is another example of flexbox layout making Navigation bar responsive along the different sizes of the screen.
HTML CODE:
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href=...
Combinators in CSS
Combinators, are ways to combine different selector into a new exact selector. A combinator explains the relationship between the selectors.
There are 4 types of combinators in CSS:-
descendant selector (space)
child selector (>)
...
Flexbox layout example
In the previous post i have shown how you can make element align horizontally and vertically using flaxbox layout.
In this post i will show you an simple example of html responsive page using flexbox.
Html Code:
<div class="wrapper"...
Flexible Box
In CSS3, flexible boxes or flexbox is a new layout mode. It provides the adjustment of elements on a page as expected, when the page design holds different screen sizes and different display devices.
It makes lots of tasks much easi...
Centering element Vertically and Horizontally using Flexbox
Now this is the issue that we were facing form a long time. To align an element center horizontally we have been using margin: 0 auto and to align an element center vertically is even more difficult. But with the use of flexbox it is very easy.
...
The difference between padding and margin in css?
Padding and the margin.
There is always been a confusion between the two for the new learner.
But when you know the difference between them they can help a lot in designing.
Both of them provide the same white space between the element t...
Media Query
Media query is css technique that is being introduce in css3.
It is used to set the css and display the page properly when seen on the different screen size.
It uses $media rule to include a block of the css only if a certain condidtion is ...
How to create a sliding background image?
To show the image sliding ion background i have used two DIV here one act as a wrapper and another contains the background image that slides.
In the .wrapper div i have added "overflow:hidden" property that will make this div to hide...
Disabling the text selection with the help of css
In many cases we do not want that the user can select the text of the website for privacy reason.
Using CSS property, we can restrict user to do so.
Here is the code below:
.disable-selection {
-moz-user-select: none; /* Firefo...
when to use float property
First of all what does float property really do basically the css float property lifts an element up from the normal content flow and shifts it to either the left or right edge of the page, where it hovers or floats above other content. Any...
How to eliminate render-blocking CSS?
I was facing issue related with speed optimization of the web page. When there are many css on a single page, or have large size of css file then it makes your website slow. I am using Google PageSpeed insights to improve my site's performanc...
CSS Combinators
Combinators are used to define the relationship between the selectors.
There are four different combinators in CSS3:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)...
Hide an Element - display:none or visibility:hidden?
display:none:
An element can be hidden by setting the display property to none.
This property hides element in such a way that when the page will be displayed it is displayed as if the element is not there.
The layout is as there w...
Image opacity
Image Opacity is a method for creating transparent images. Following are the examples for Image opacity :
Creating a Transparent image.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>...
CSS:Animation effect
Hii,
i am sharing an example of css animation effect in which the basic concept of this animation is an easing function which is used here to show cubic bezier effect which is providing the movement of image .
here's the...
Media Types
CSS Media types
CSS media types is an important feature of CSS style sheet which specify how to format or present a document on different media i.e on screen, on paper, with speech synthesizer.
There are following different ...
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>
...
Apply Ribbon at corner of a Box
Hello readers here is a simple line of code that will give your page a new look using a corner ribbon tag... it will help you to add ribbon aside of your working area by using pure CSS code. You can use this code whenever you want to display som...
:nth-child in css
The :nth-child selector in CSS code is here it will allow you to select one or more elements according to the formula. It is used to style content based on parent and child relationship.
:nth-child iterates throughs elements from the top ...
CONCEPT OF EVEN AND ODD RULE.
CONCEPT OF EVEN AND ODD RULE USED IN A ROW-
Readability of rows in a large table is hard to read and understand but it can be easily verified by using even odd concept.
FOR EXAMPLE
Following Table have 7 row and 6 columns. The number of eve...
Future of web designed is RWD:-
RWD:RESPONSIVE WEB DESIGNED is making the elements and pages responsive for all devices.
A responsive website consist of CSS3, ,media queries and @media rule, flexible images, flexible videos, and fluid type, all of which allow responsive websi...
z-index in CSS
Z-index Definition:-
z-index property specifies stack order of any element or it only works for the positioning of an element i.e when position is absolute, relative and fixed.The vale of Z-index mostly used -1, 0 ,1
-1 is used for the pos...
How to give 2D or 3D effects to HTML element.
Hello Readers!
If you wish to give your HTML elements an effect this an be achieved by using css transform property. The CSS transform property allows us to visually manipulate an element by rotating, skewing, translating, or scaling. This pr...
CSS SELECTOR
Css Selector:
It is a css rule set used to select the the content you want to style.
Types of selectors you want to style:
Id selector
Element selector
Group Selector
Universal selector
Class selector
ID Selector:
It selects t...
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 ...
Pseudo-Classes
Pseudo Classes:
Pseudo - Classes are dynamic and are used to style the content as a result user interaction. Pseudo- class starts with a colon(:).
For E.g: :hover, :active, :focus.
:hover - This class changes the color of an element whe...
Less Parametric Mixins
LESS mixins can be extended into sort of functions in which they accept parameters more than once, it is being called Parametric Mixins. Through these parameters you are able to customize the mixin output in according to what you passed through t...
How to make gradient in backgound of a div
Hello Readers if you need to show mix colored in the background of the div then instead of using the photoshop images you can also do it by using CSS3.
Lets see the code css for this:-
background:-webkit-gradient(radial, 165 0, 0, 220 -257,...
How to make 3d effect of a div using CSS
Hello Reader's if you want to make your html webpage to look like 3d image then you can use the code below.
Here in the code css will make the background shadow of div, Which will make it appear in 3d.
Let's see the code:-
-moz-box-shadow:...
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 to make mouser hower motion on image using CSS
Hello Reader's if you want to make the animation in the image then you can use the cssmaker css. And here by using the css code below you can see and learn how to make this:-
.classname {
transition:All 1s ease;
-webkit-transition:All 1s eas...
How to make border with round radius for all the images in website
Hello Reader's you want to make the edges with border and round in shape for all the images in you website then you just need to put CSS3 to update as below:-
border:solid 5px #000000;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
...
How to show new messages in desing using CSS
Hello Reader's if you want to make nice view to show the messages and alert count then you can use the Badge of bootstap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta c...
how to show color in button of html form using Bootstrap CSS
Hello Reader's if you want to show color in the buttons then you can use bootstrap css.
In this blog you can see and learn how to make them customize. Lets see my code as below:-
<!DOCTYPE html>
<html lang="en">
<head>
...
How to make simple popup using Bootstrap
Hello Reader's if you are looking for nice and light design of popus, then bootstrap offers you much better way of doing this.
Lets see the code as written as below:-
<!DOCTYPE html>
<html lang="en">
<head>
...
How to color to your alert message using Bootstrap
Hello Reader's If you want to print the alert messages in color, i.e. Red for danger and Green for success messages then Twitter Bootstrap offers you a good way to showing this.
Let's see the example as below:-
<!DOCTYPE html>
<ht...
How to make Ajax loading icon using CSS
Hello Reader's if your website is taking too much time to load the data then you can show the ajax loading icon for the time.
Lets see how to put the loading icon in the website.
<!DOCTYPE html>
<html>
<meta name="viewport"...
How to make simple dropdown menu using CSS
Hello Reader's if you are new to designing the menu bar, Then you can see how to make the quick dropdown menu using HTML and CSS.
<!DOCTYPE html>
<html>
<title>findnerd dropdown example</title>
<meta name="viewpor...
The general css for header, body and footer for all website
Hello Reader's if you are new to designing the website then you must have to know the common CSS that must be inlcuded in every website.
Lets see the CSS in the example below:-
<!DOCTYPE html>
<html>
<title>W3.CSS</titl...
Some Important Properties in Css
Properties are the most important features of the CSS as specify the visibility, size, and precise position of individual elements in a document. Other CSS properties allow you to specify stacking order, transparency, clipping region, margins, pa...
snow fall effect using pure css
Hi all,
Below is an example of snow falling effect using pure css3. in this example I'm just using css animation and change the snow image position -
css
#snow{
background: none;
background-image: url('snow.png'),url('snow2.png'...
CSS3 Media Queries
Media queries is used to make web page responsive i.e. for mobile phones, tablet. It is based on the capability of the device instead of checking only the device width and height.
It can check the following points:
Viewport width and heig...
Making different colored type alert box with less
For example Lets create an alert box, so for this we define the base styles; some padding , a border and background.
To start with it, we have to set out the list of colors and name variations of the alert box. Then count the number of variati...
How to change the background color on a input checkbox with css
Pseudo elements are useful for changing the background colour of the checkbox and radio buttons. We can use :before and :after to change the colour or appearance of the checkboxes. It can all work with css styling.
Example:
<div class="c...
Measurement Units supported in CSS
CSS supports the following Measurement Units
% :- This is % symbol used when we want to give a measurement as a percentage.
e.g:-div{width:100%;}
cm :-An abbreviation of centrimeters is cm and it is used when we want to give a mea...
JavaScript encodeURIComponent() Function
The URI component encoding is yield by the function called encodeURIComponent(). This function encodes special characters like this: , / ? : @ & = + $ #. We can use the decodeURIComponent() function to decode an encoded URI component.
Sy...
How to Flip an Image using css?
Yon can flip image with css please check the code below
img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-...
Simple Zebra Table by using Css3
Hello Readers,
Here is the Example of Simple Zebra Table.
Here is the HTML
<table>
<tr>
<th>Name</th>
<th>Date of Birth</th>
<th>Age</th>
...
Bootstrap Pager
Bootstrap Pager
In case of multiple pages in bootstrap,we can also create previous and next links for effective pagination. This is used when the number of pages are less in quantity. It is great and effective for simple sites blogs or magazin...
Bootstrap pagination
Bootstrap pagination
In case of multiple pages in bootstrap,we can also number them making our presentation more efficient.This can be done through pagination.These large blocks is hard to miss,easily scalable and provides large click areas.
...
