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
Progress bars in Bootstrap
Progress bars in Bootstrap.
Bootstrap helps in providing up-to-date feedback on the progress of a workflow or action.This can be done by using progress bars.You can also add label to the progress bar thus making it more user-friendly.
<d...
Links in alerts
Links in alerts.
In bootstrap we can also create matching colored links along with the alert messages.Through this you can add a link whenever contextual message pop's up under specified action.This can be done by adding alert-link class.
&...
Bootstrap Alerts
Bootstrap Alerts.
Bootstrap provides a medium to print contextual feedback messages for typical user actions with the handful of available and flexible alert messages.These alert messages pop-up under specified user action which can be manipul...
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...
Disable text selection highlighting using css
Hi all,
Below is an example, How to disable the text selection and copy text.
Controls the actual Selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes.
CSS :-
.noselect {
-webkit-tou...
Pre loader using pure css
Hi All,
Below is some example of pure css loader. Using css animation. All are single element loader.
Please, check the below code for details.
section{
margin: 10px 0;
}
.loader {
position: absolute;
z-index: 1;
left: 0;
...
What is css preprocessor ?
CSS pre-processors have really started to gain in popularity in the last several years. It have been around for a while now. We need a compiler to compile that. It means we can't render directly to pre-processors file (scss ,less, styls). In simp...
Using Operations in Less
You can use basic math operations to numerical values and colors. if we want to have two divs placed next to each other, the second one with a different background.
@div-width: 100px;
@color: #03A9F4;
div{
height: 50px;
display: inli...
How to remove header and footer in print
When we print some html page bydefault the header and footer comes. On different browsers its in different way.
To remove it from chrome use
@page{
size: A4;
margin: 5mm; /* this affects the margin in the printer settings *...
Less Scope
Values of less variable depends on the scope. If the value is not specified in the specific scope, LESS will look for it in upper blocks until it finds the nearest declaration.
Example:-
@text-color: #000000;
ul{
@text-color: #fff;
...
How to do Nesting in Less
Nesting is used to style your structure of the stylesheet that matches the HTML structure of the page to reduce the chance of conflicts.
Example:-
ul{
background-color: #03A9F4;
padding: 10px;
list-style: none;
li{
backgr...
How to use Less Mixins
LESS gives us the oportunity to use an existing class or ids and apply all its styles directly to another selector.
Example:-
#circle{
background-color: #4CAF50;
border-radius: 100%;
}
#small-circle{
width: 50px;
height: 50...
Variables in Less
The one of the main feature of Less is the variables just like in a standard programming language. Variable can store any type of value colors, dimensions, selectors, font names, URLs etc. The use of less is to reuse the CSS syntax where ever pos...
CSS selector?
CSS selector is a part of CSS rule set which is actually selects the content of your page which you want to give style.
There are different kinds of selectors available.
Universal Selector: Apply CSS on all of the elements
* {
co...
What is CSS box model
Hii,
As we all know CSS is style sheet language used to give a beautiful look,Design to our document written in HTML.
CSS is an abbreviation for Cascading Style Sheet.
CSS is a kind of technology used by many websites to create attracti...
Making any element resizeable
For making an element resizeable vertically, horizontally or both we use the CSS3 attribute resize. The resizeability in a textarea can be be disabled using the same.
Property and value:-
resize: vertical;
resize: horizontal;
resize: both...
Animating the box Borders
We first create the borders well use a dashed outline and a box shadow.
The outline have all its values; width, type and color. The box-shadow only needs the value for spread which should be the same as the outlines width and its color. The outl...
3D Flip Rotate animation CSS3
For making a flip roatation we use CSS3 3D property. Child elements will preserve its 3D position that is specified by Preserve-3d. The nested elements are rendered in 3D space are specified by transform-style property.
Here is the example:-
...
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...
What is image sprite and its uses in CSS?
CSS image sprite is a single image like a image-sheet with all
the images needed for your website.
Image sprites is having all the
images needed at one place in a
single image to it makes the browser
work easy while the browser try to
...
Making a Text Half styled
The advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually.
Works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on...
Horizontally center a div inside a div with css3
Box-pack
The box-pack property specifies where child elements of the box are placed when the box is larger than the size of the children. It specifies the vertical position in vertical boxes, and the horizontal position in horizontal boxes.
B...
How to make blur overlay effect using CSS
Hello Reader's, If you have to make the beautiful overlay of blur effect of image on the screen then you can learn it from the code below.
This is done by using CSS 3
Put the css as
#myDiv {
width:280px;
height:200px;
...
Image Sprites in CSS
Image sprites is a collection of different images in a single image. image sprites can can be used in html page for showing different images seperately and help us to increase our image loading time. Any Web page with multiple images generates th...
How to make shadow of text in html using CSS
Hello Reader! If you want to make your webpage more dynamic which looks like 3d using shadow of texts,
Then you can use CSS.
You just need to add the following css to you text css.
text-shadow:23px 5px 6px #000000;
To make shadow long...
How to make background blur using CSS
Hello Reader!. If you want to show background image blur then you can use css.
Lets's make a html page :-
<div class="background-image"></div>
<div class="content">
<p>This is the para showing the content over the...
How to style checkbox using CSS
If you want your html form to look more beautiful than just the simple check boxes then you can use the following advance css. This will give rich looks to your html form by styling checkbox
First on the html form create the checkboxes using t...
Opacity in CSS
To specify the how transparent an element is, we use opacity. Basically it defines the clarity of the image.
Example
<!DOCTYPE html>
<html>
<head>
<style>
img.t {
opacity: 0.8;
}
</s...
Text Alignment in CSS
the horizontal alignment of a text can be set by using this property
we can aligned the Text to center or to the left or right, or justified.
Example
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
...
CSS Background Property
CSS background property defines the background effects and changes on an element. There are 3 CSS background properties that affects the HTML elements:
1)background-color
2)background-image
3)background-repeat
1) CSS background-color
Th...
CSS overflow Property
This property describes what happens when content overflows an element's box.
In certain cases, a box may overflow and its content may goes partly or entirely outside the box.
CSS Syntax
overflow: visible|hidden|scroll|auto|initial|inheri...
Media types
Media type
Media types, by default the value for the media attribute is all. Without the attribute in the link element,
the user agent will apply the CSS rules in the stylesheet to 'all' media.
all - Suitable for all devices
braille - ...
Selectors in CSS
Selectors help to select an element to which you want to apply a style.
selectors are patterns used to select the element(s) you want to style.
Examples: .class, #id
<div class="intro">
My name is Pranav Chhabra.
This is my first Tas...
Top tips to follow to make a good website home page design with advanced CSS
Making a good website design is very important. First impressions are important after all. In the multitudes of website available at the disposal of the millions of customers who come looking for such websites it is very important to make an impr...
3-D effect by box-shadow property in css
The shadow behind a box gives an amazing 3-D effect. We can apply this 3-D effect by box shadow property.
The Syntax is :
box-shadow : [horizontal-positioning-value] [vertical-positioning-value] [blur-radius] [optional disperse-radius ] [c...
Make bullet colors in ul li lists using CSS
Hello Reader's
Here is an example bullet list (unordered list) without using any image, you can use custom bullets in your web page as done below.
Here is the HTML
<div class="demo">
<ul>
<li>Your Listing C...
Difference between display:none and visibility:hidden in CSS?
Below is the difference between display:none and visibility:hidden in CSS
display:none:
It is used to hide an element. As it do not occupy any space when hiding an element. In other words, it means that the element hidden is not considered ...
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...
Rounded Circle Menu Example
Hi all,
An interesting CSS trick is the creation of circles navigation, sometimes we need this type of navigation, mainly for mobile. Hence it can be useful.
You need to know about pseudo elements for better understanding of this type nav...
Designing Animated Burger Icon
Hi guys,
So many times people search for how to create animated burger icon used for menu, that changes to cross on click.
Here I have written code for that using html, css and a very little javascript. where the 3 horizontal lines gets conve...
Responsive CSS Counter-Increment
Hello Reader's
In this article I will guide you about the Responsive CSS Counter-Increment. As in example you can see the css counter counting itself.
Here is the example below you can copy & paste the code.
Here is the HTML
<div...
Multiple column using CSS3
Hello all,
Here I am sharing some information about how to get multiple columns layout using css3.
By using css3 column-count property we can divide an element into number of columns.
Here is an example:
div {
-webkit-column-count:...
CSS3 Animations
Hello All,
Here I am sharing some information about the animations through CSS3.
As we know animation is changing the style of an element. we can change the animation by changing the style of an element using css properties. When we talk ab...
How to use Variables in Stylus
Hi Guys,
We can use variables in Stylus like the example given below.
$fontColor = #000
$basefont = 'Raleway' sans-serif;
How can use this ?
.block
font-size 15em
color $fontColor
font-family $basefont
You ...
How to inherit a class in stylus
Hello all,
In prior tutorial I have explained you about Stylus and Creating Syntax in Stylus. Now in this Tutorial I have demonstrated examples to inherit a class in stylus.
@extend
We can use @extend for inherit the css class check the...
CSS3 child and combinators selectors
CSS3 child selector :
CSS3 nth child selector, selects the child element of its parent.
The common syntax: :nth-child(n)
There are many other syntax related to nth-child. Few of them are:
1. :nth-child(odd)
For selecting the odd child elemen...
What is :target selector ?
The :target pseudo-class represents a unique element, with an id matching the fragment identifier of the URL of the document..
For example, the URL http://website-path#demo contains the fragment identifier #demo. In HTML, identifiers are found...
