How to Create CSS Shapes, Support All Modern Browsers

CSS Shapes

CSS Shapes By using this shapes we can make interesting and unique layouts of geometric shapes. In this article we’re going to go over the basics and creating some simple layouts using these new CSS  technologies. We can create SVG Shapes using Background-Clip-Path.

Background Clip Path CSS Shape

We will teach you how Background Clip Path create a mask in different shapes. In this section will create a one polygon shape with movie poster mask. 

Polygon Shape : SVG 

But let’s start with SVG a shape. Follow the below Example:

Background image clip path
Background image clip path

We are creating some Basic shapes like circle, triangle, rectangle, square,oval and some other shapes. We can make lots of shapes in CSS with only a single HTML element.  Apply CSS Shape to any HTML Button.

Rectangle : CSS Shape

To design a rectangle using CSS we have to add width and height so, that we have the exact size rectangle we need.

We are creating a class called .cssrectangle. In that we defined some properties like width:240px, height:120px and background:#1abc9b. By using this properties we created a Rectangle as shown below.

<div class="cssrectangle"></div>
 .cssrectangle {
	width:240px;
	height:120px;
	background:#1abc9b;
}

Square : CSS Shape

To design a Square using CSS we have to add width and height so, that we have the exact size Square we need.

we are creating a class called .csssquare. In that we defined some properties like width:120px, height:120px and background:#1abc9b. By using this properties we created a Square as shown below.

 <div class="csssquare"></div>
.csssquare {<br>
    width:120px;<br>
    height:120px;<br>
    background:#1abc9b;<br>
}

Circle : CSS Shape

To design a Circle using CSS we have to add border-radius and we can round that shape, and enough of it we can turn those rectangles into Circle.

we are creating a class called .csscircle. In that we defined some properties like width:120px, height:120px, background:#1abc9b, and border-radius:50%. By using this properties we created a Circle as shown below.

<div class="csscircle"></div>
 .csscircle {
	width:120px;
	height:120px;
	background:#1abc9b;
	border-radius:50%;
}

Oval : CSS Shape

To design a Oval using CSS we have to add border-radius and we can round that shape, and enough of it we can turn those rectangles into Oval.

we are creating a class called .cssoval. In that we defined some properties like width:120px, height:120px, background:#1abc9b, and border-radius:100px/50px. By using this properties we created a Oval as shown below.

<div class="cssoval"></div>
  .cssoval {
	width: 200px; 
   height: 100px; 
   background:#1abc9b; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}

Triangle Up Arrow Shape

To design a Triangle upside using CSS we have to add border so,that we get the Triangle facing upwards.

we are creating a class called .cssarrowup In that we defined some properties like width:0, height:0,border-left:60px solid transparent, border-right:60px solid transparent,border-bottom:120px solid #1abc9b. By using this properties we created a Triangle up as shown below.

 <div class="cssarrowup"></div>
  .cssarrowup {
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 120px solid #1abc9b;
}

Triangle Down Arrow Shape

To design a Triangle Downside using CSS we have to add border so,that we get the Triangle facing downwards.

we are creating a class called .cssarrowdown. In that we defined some properties like width:0, height:0 ,border-left:60px solid transparent, border-right:60px solid transparent, border-top:120px solid #1abc9b. By using this properties we created a Triangle down as shown below.

<div class="cssarrowdown"></div>
  .cssarrowdown {
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-top: 120px solid #1abc9b;
}

Triangle Right Arrow Shape

To design a Triangle right using CSS we have to add border so,that we get the Triangle towards Right.

we are creating a class called .cssarrowright. In that we defined some properties like width:0, height:0, border-left:120px solid transparent, border-top:60px solid transparent, border-bottom:60px solid #1abc9b. By using this properties we created a Triangle down as shown below.

 <div class="cssarrowright"></div>
  .cssarrowright {
	width: 0;
	height: 0;
	border-left: 120px solid #1abc9b;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
}

Triangle Left Arrow Shape

To design a Triangle Left using CSS we have to add border so,that we get the Triangle towards left

we are creating a class called .cssarrowleft. In that we defined some properties like width:0, height:0, border-right:120px solid #1abc9b, border-top:60px solid transparent,and border-bottom:60px solid transparent. By using this properties we created a Triangle Left as shown below.

<div class="cssarrowleft"></div>
 .cssarrowleft {
	width: 0;
	height: 0;
	border-right: 120px solid #1abc9b;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
}

Triangle Top Left Arrow Shape

To design a Triangle Top left using CSS we have to add border so,that we get the Triangle facing Top Left

we are creating a class called .css_triangle_topleft. In that we defined some properties like width:0, height:0 border-right:120px solid transparent, border-top:120px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_topleft"></div>
 .css_triangle_topleft {
	width: 0;
	height: 0;
	border-right: 120px solid transparent;
   border-top: 120px solid #1abc9b;
}

Triangle Top Right Arrow Shape

To design a Triangle Top Right using CSS we have to add border so,that we get the Triangle facing Top Right.

we are creating a class called .css_triangle_topright. In that we defined some properties like width:0, height:0 border-left: 120px solid transparent,border-top: 120px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_topright"></div>
  .css_triangle_topright {
	width: 0;
	height: 0;
	border-left: 120px solid transparent;
   border-top: 120px solid #1abc9b;
}

Triangle Bottom Right Arrow Shape

To design a Triangle bottom Right using CSS we have to add border so,that we get the Triangle facing bottom Right

we are creating a class called .css_triangle_bottomright. In that we defined some properties like width:0, height:0 border-left: 100px solid transparent, border-bottom: 100px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_bottomright"></div>
.css_triangle_bottomright {<br>
    width: 0;<br>
    height: 0;<br>
    border-bottom: 100px solid #1abc9b; <br>
   border-left: 100px solid transparent; <br>
}

Triangle Bottom Left Arrow Shape

To design a Triangle bottom Left using CSS we have to add border so,that we get the Triangle facing bottom Left.

we are creating a class called .css_triangle_bottomleft. In that we defined some properties like width:0, height:0 border-left: 100px solid transparent, border-bottom: 100px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

 <div class="css_triangle_bottomleft"></div>
 .css_triangle_bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid transparent; 
   border-left: 100px solid #1abc9b; 
}

It is very simple and easy to use, all major browsers Chrome, Mozilla, Safari, Internet Explorer are supported. Most common shapes created by CSS3, These chapter will give you the best and easy CSS3 shapes.

Browser Compatiblity:

Full Support of CSS Properties

Browser Compatibility
Browser Compatibility

Number of Columns in a row using flex box and column count

Container is used to set the content’s margins dealing with the responsive behaviors of your layout.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

The columns have been created by wrapping four DIV elements into one container DIV.

In this we are using a class called card in that we defined a property called

HTML

<div class="container">
<br/><br/>
<section>
  <div class="row">      
	  <div class="card">		 
	    <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  
  </div>
 </section>

css

body{background:#f1f1f1;}
section{background:#fff;padding:40px;}
.card{flex:0 25%;margin-bottom:30px !important;padding:15px;border:none;}
.profile{margin-top:80px;padding:5px;}
.profile a{position: absolute; bottom: 20px;}
.card-cp{background-color: #fff;background-clip:border-box;
border:1px solid rgba(0,0,0,.125);border-radius:.25rem;padding:15px;}
@media(max-width:1000px){.card{flex:0 50%;}}
@media(max-width:768px){.card{flex:0 100%;}}

 

the property flex:0 25% will defineds the first value must be a <number> and it is interpreted as <flex-grow>. The second value must be one of:

a <number>: then it is interpreted as <flex-shrink>. (or) a valid value for width: then it is interpreted as <flex-basis>.

flex:0 25% ; is used to create  four div elements (or) four flex boxes.
flex:0 33.33% is used to create  three flex boxes.
flex:0 50%    is used to create  two flex boxes.
flex:0 100%   is used to create one flex box.

Demo Download

 

How to create an Equal height grids using flex

You can easily create a equal height blocks. Flex box layout using a set of CSS properties designed for this task. Flex box is used to add padding, border, and margin to the child elements without needing to worry about a column spelling over to the next row.

In this demo we are creating three columns of equal width, equal height, and fixed-pixel margin between them, as well as any amount of padding by using flex.

HTML

<div class="container">
<br/><br/>
<section>
  <div class="row">      
	  <div class="card">		 
	    <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 	  
  </div>
 </section>
</div>

CSS

body{background:#f1f1f1;}
section{background:#fff;padding:40px;}
.card{flex:1;}
.row .card{margin:0 15px;}	
.profile{margin-top:80px;}
.profile a{position: absolute;
bottom: 20px;}
@media(max-width:768px){
.card{flex:100%;}
}

 

equal blocks
Equal blocks/boxes using flex without height

 

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

we created classes like .card, .profile. In class (.card) we defined flex:1 to diplay equal height boxes. In class (.profile) we defined properties like margin-top : 80px; we also created a button and we used properties like position : absolute and bottom : 20px;.

 

9 Things You Need to Know to Be a Successful Web Designer

Design a world with a web designer

To design any program we must have it:

1) HTML :

HTML is one of the most important things a web designer or web developer can learn. HTML stands for HyperText Markup Language, which is the coding language used to put content on a web page and give it structure. All HTML elements are the building blocks of HTML pages.

2) CSS :

Cascading Style Sheets handle their visual appearance.

To build structure & style of web page.

With CSS, you can adjust the colors, change the fonts, or add a background —etc..

the two languages are really the combination that builds the structure and style basis for any web page.

3) Designing:

For every designer they must have an idea regrading the basic design to implement on it.

You must have the knowledge of the elements of design . as well as the basic design principles . as well as typography best practices, how to use images, layout principles, and more.

4) PHP, ASP, Java, Perl:

To create a web page, we must learn atleast one or two programming languages.

5) Mobile support:

Now a days mobile applications are very mergefull & attractive to the users.

6) Customer support:

If we work for house resource (or) agent,they must communicate with present design ideas &manage connectivity between them.

7) Web server domain:

By knowing which server responds to the things. we can run our program more better.

8) Time management:

It will ensure that to keep in time.

Good web designers need to manage their schedules and follow up on project needs.

9) Digital marketing:

Digital marketing refers to advertising the products and services through digital channels such as search engines, websites, social media, email, and mobile apps.

Conclusion:

A good understanding of mix trends & techniques will help to be a good web designer. Keep learning and improving your Web designer skills, that’s the only secret to becoming a good web designer.

How to create a fixed div on scroll down jquery

The concept of this demo is the sidebar that should appears on right side of the page .and the left side is contain with the content .while the user is scrolling down and also, when they are scrolling the page up then the side bar should follow/scroll the page. To achive, this we are using jquery.

The <html> element is the root element of an HTML page,the <head> element contains meta information and <title> element specifies a title for the document. The <style> tag is used to define style information for an HTML document.

HTML

<div class="container">
	<div class="text">
		<h1>Scroll Container A</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit 
	amet nulla sem, nec consectetur velit. Aliquam tempus, nisl sed 
	fringilla rutrum, tellus risus molestie nisl, nec molestie nunc tellus 
	vitae urna. Sed ornare mollis metus ac eleifend. Nulla at purus leo. 
	Vivamus egestas lorem vitae risus interdum vitae vehicula libero 
	aliquam. Vestibulum cursus est vel tellus consectetur rutrum condimentum
	 magna euismod. In venenatis dapibus dui, non laoreet tellus consectetur
	 id. Fusce ut ornare turpis. Suspendisse in leo quis massa auctor 
	
	lorem rutrum bibendum sit amet id mauris. Pellentesque habitant morbi 
	tristique senectus et netus et malesuada fames ac turpis egestas. Duis a
	 risus ac ligula pulvinar placerat nec ac felis. Quisque a massa elit, 
	vel ornare felis. Quisque placerat, dui vel tristique facilisis, sem 
	lectus tincidunt neque, ac iaculis lectus leo id felis.</p>
		<p>Vestibulum sed felis diam. Vivamus ac mi semper massa tincidunt 
	placerat. Phasellus consectetur, augue nec faucibus lobortis, diam 
	ligula pharetra nisi, ut consequat magna leo porta mauris. Nunc vitae 
	dolor nisi. Sed at neque nec arcu eleifend suscipit. Fusce pellentesque 
	purus ullamcorper orci scelerisque adipiscing. Curabitur placerat mi 
	eget tortor hendrerit vehicula in sit amet eros. Vestibulum ante ipsum 
	primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin 
	nec justo ac dolor dignissim pulvinar feugiat in sapien. Suspendisse 
	tincidunt tristique risus, sed faucibus arcu sagittis eu. Nulla et 
	dignissim tortor. Suspendisse dictum ornare velit, at viverra mi 
	condimentum a.</p>
	</div>

	<div class="scroll">
		<h2>Scroll Element A</h2>
		Scroll down/up to see me smoothly reposition myself and keep in view.<br><br>
		
	</div>

	<div class="clear"><!-- clear --></div>
</div>

CSS

body{background-color: #f9f7fc;
padding: 6rem 0;}
.container { 
background-color: #fff; 
margin: 0px 50px 100px 50px; 
padding: 50px;
}	
.text {float: left;width: 70%;}
.scroll {float: left; width: 21%; padding: 0% 2% 2%; margin-left: 4%; 
margin-top: 85px; border: 2px solid #32d296;background-color:#FFEEEE;
background:#edfbf6;color: #32d296;}		
.clear {clear: both;}

To create this type of demo we are using a class container and text and scroll.To create left side content we used a class called text and to create right side we are using a class called scroll . In that scroll we defined some properties like width:21%; margin-left, float, background-color. we are calling a function scroll in jquery .

$().ready(function() {
     $(".scroll").jScroll();
});   

By using this function we created the follow/scroll side bar.

Output:

we the user scrolling the page from top to bottom or bottom to top the sidebar will scroll/follow the page.

 

Dot waving Animation

Dot waving animation, we are going to create a circle with sonar effect using css.

The concept is quite simple. To create a circle with sonar effect . we defined two classes called (.dot ) and (.wave). The class (.wave) is the child of class (.dot).

Position : absolute is applied to both parent class and child class.

First we are going to create a circle by using

HTML

<div style="max-width:500px;margin:auto;margin-top:10vw;">
			<h1 style="display:inline-block;">This is a Heading</h1>
			<div style="position:relative;display:inline-block;vertical-align:top;">
			  <div class="dot"></div>
			  <div class="wave"></div>
			</div>
        </div>

CSS

.wave {
  width: 10px;
  height: 10px;
  border: 5px solid #1abc9b;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #37964b;
  z-index: 10;
  position: absolute;
}

.dot {
  border: 10px solid #1abc9b;
  background: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: wave 3s ease-out;
  -moz-animation: wave 3s ease-out;
  animation: wave 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index:1;
  opacity:0;
}

Now we are creating anther circle. The shape, size, displaying position, and color are the same as the first circle. Note that we set z-index to 1 to make sure it lies underneath its parent.

we wanted it to go from 0% semi-transparent to completely transparent while spreading to the scale of 1 time. So here is how we designed the animation keyframe:

css keyframes

@-moz-keyframes wave {
 0% {
    -moz-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -moz-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}

This Keyframe is applied to second circle called wave class

Demo

Different types of Box shadows using CSS

Box Shadow

Defines the Box Shadow of the element. The box-shadow property attaches one or more shadows to an element.

the property box-shadow:none; is used to Removes any box-shadow that was applied to the element.

the property box-shadow: 2px 6px; is used to two values the first is the horizontal offset the second is the vertical offset The shadow color will be inherited from the text color.

the property box-shadow: 2px 6px red; is used to define a color as the last value. As with color, you can use color names, hexadecimal, rgb.

HTML

<div class="split">
	<h1>1. Shadows </h1>
	<div class="shape box-shadow1">   
	</div>
	<div class="shape box-shadow1">	   
	</div>
	<div class="shape box-shadow1">	   
	</div>
</div>
<div class="split">
	<h1>2. Shadows </h1>
	<div class="shape box-shadow2">	   
	</div>
	<div class="shape box-shadow2">	   
	</div>
	<div class="shape box-shadow2">	   
	</div>
</div>
<div class="split">
	<h1>3. Shadows </h1>
	<div class="shape box-shadow3">	   
	</div>
	<div class="shape box-shadow3">	   
	</div>
	<div class="shape box-shadow3">	   
	</div>
</div>
<div class="split">
	<h1>4. Shadows </h1>
	<div class="shape box-shadow4">	   
	</div>
	<div class="shape box-shadow4">	   
	</div>
	<div class="shape box-shadow4">	   
	</div>
</div>
<div class="split">
	<h1>5. Shadows </h1>
	<div class="shape box-shadow5">	   
	</div>
	<div class="shape box-shadow5">	   
	</div>
	<div class="shape box-shadow5">	   
	</div>
</div>
<div class="split">
	<h1>6. Shadows </h1>
	<div class="shape box-shadow6">	   
	</div>
	<div class="shape box-shadow6">	   
	</div>
	<div class="shape box-shadow6">	   
	</div>
</div>

<div class="split">
	<h1>7. Shadows </h1>
	<div class="shape box-shadow7">	   
	</div>
	<div class="shape box-shadow7">	   
	</div>
	<div class="shape box-shadow7">	   
	</div>
</div>

the property box-shadow: 2px 4px 10px 4px red; The optional fourth value defines the spread of the shadow.

The spread defines how much the shadow should grow it enhances the shadow. we used a Properties position:absolute, box-shadow: 0 15px 10px #777; transform: rotate(-3deg).

CSS

.split{margin-left:50px;margin-bottom:50px;}
.split:after{content:'';clear:both;display:block;}
.shape{width:250px;height:300px;float:left;margin-right:40px;background:#fff !important;}
.box-shadow1{box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
border-color: rgba(223,225,229,0);}

.box-shadow2{-webkit-box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
-moz-box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
border-radius:7px;}

.box-shadow3{box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);}

.box-shadow4{
     background:#f1f1f166;
     box-shadow: 0 10px 6px -6px #777;
}

.box-shadow5
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow5:before, .box-shadow5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.box-shadow5:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.box-shadow6
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow6:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}

.box-shadow7
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow7:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(3deg);
}

The horizontal offset (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.

The vertical offset (required) of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.

On hover line filling color

when you start scrolling the web page The arrow will appears at the bottom right corner of a web page . When clicked, it brings you back to the top of the page.

When we hover over a button the cursor changes to a pointer, and the background becomes a red. In order to make the transition smooth, we assign the transition of 400ms ease all to the background-color property. Also, when we click the button, the background color also changes . When you click button, this page scroll to top of the position.

onclick="$('html,body').animate({scrollTop:0},'slow'); .animate() method is the list of properties which we should animate. we used a property called scrollTop, and we want it to have a value of 0.

HTML

<div class="container">
    <div  class="hidden123" id="top-link-block" style="position:absolute;bottom:30px;right:30px;cursor:pointer;">
	    <p class="gotop" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
		  <span class="text-center mbn"> TOP </span>
		</p>
	</div>
 </div>

we are using anthor parmeter the speed with which we want our animation to run. It is measured in milliseconds and the higher the number, the slower the animation. Finally, we apply the animate method to the HTML and body elements on our web page.

Now each time when we click the button, it will take us to the top of the page.

CSS

.gotop {
    left: 49.5%;
    bottom: 45px;
    margin-bottom: 0px;
    height: 80px;
}
.gotop span {
    margin-top: 0;
    display: block;
    transition: 400ms ease all;
    text-transform: uppercase;
    color: #f5006f;
    z-index: 9;
    position: relative;
    top: 0px;
}
.gotop:after {
    content: '';
    width: 2px;
    height: 50px;
    background-size: 100% 200%;
    background-image: linear-gradient(to top, #f5006f 50%, #585858 50%);
    position: absolute;
    left: 11px;
    bottom: 0px;
    transition: 400ms ease all;
}
.gotop:hover span {
    top: -25px;
    display: block;
    transition: 400ms ease all;
}
.gotop:hover:after {
    content: '';
    background-position: 0 100%;
    transition: 400ms ease all;
    height: 70px;
}

How does it works ?

step1: copy css and paste in style.csss page or paste under head tag.

step2: Add div structure in body page

Output

This “top-link-block” link allows users to smoothly scroll back to the top of the page.

How to create a cursor typing animation using css

Animation

Cursor Typing Animation is something which changes styles of an element. We can change the properties of CSS as we want according to the requirements. To use CSS animation, you must first specify some key frames for the animation.

STEPS

Firstly we take doctype tag which is used to defines the document type then in that we open html tag which is used to Define an HTML document.lang and class are the attributes used in html tag. Next we take head tag which is used for defining information about the document. Meta is used for defining metadata(data about data) about an HTML document.

In the body part Defines the document’s body in h1 tag we used a class “cd-headline clip is-full-width” for defining heading.

Inside that we use span tag which defines a section in a document. Span tag prints “my favorite food is” then by using the class called cd-words-wrapper.

HTML

<section class="cd-intro">
		<h1 class="cd-headline clip is-full-width">
			<span>My favourite food is</span>
			<span class="cd-words-wrapper">
				<b class="is-visible">Pizza</b>
				<b>Biryani</b>
				<b>Burger</b>
			</span>
		</h1>
	</section>

Inside span tag we again declare another tag called bold by using class is-visible which is declared inside the cd-words-wrapper is-visible class is used styles like 

opacity: 1;
  -webkit-animation: slide-in 0.6s;
  -moz-animation: slide-in 0.6s;
  animation: slide-in 0.6s;

with this animation is created. In the animation we get an alternatives like pizza, burger, biryani as our favorite food.

OUTPUT:

My favorite food is pizza(or)Burger(or)Biryani.

Background image (blur) revealed with mouse action

Background image revealing is the excellent feature from CSS animation

The focus event is called on focusing, and blur – when the element loses the focus.

In this Post, I am trying to create a background image opacity / blur hover effect. I have the image as a background in the CSS, but it also blurs and fades the text. We are using a properties like position:relative;height:100%; for the image.

The id attribute of the <filter> element defines a unique name for the filter. and By using <feGaussianBlur> element we defined blur effect.

when we creating a blurred background from a give image using SVG filters, with a fade in/out, Animation based on velocity.js or jQuery animate() method. In this we are using jQuery , for mouse action so, that Background Blur image revealed with mouse action.

Lean how to create a revealing background blur image, Moving with mouse positioning and it will get appropriate order. We seen before, a bunch of code written on the paper, will erase after we will write. Similarly always mouse position clears blur.

You can add any image and set the image size with css.

Example

overlay:

Here we set the position by using absolute property and place it where you want.

pic:

Here we manage the placing with position relative.

blue:

set height with 100%

change image and replace with new path.

Follow the below function

mousemove function used and set ‘x’ position and ‘y’ position. You can change the attribute

<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
        <image filter="url(#filter2)" xlink:href="female.jpg" width="100%" height="100%"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="40" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="female.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", (upX) + 'px');
});
</script>

Follow below style properties

   <style>
 body {
    margin: 0;
}
.pic {
    text-align: center;
    position: relative;
    height:600px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
 </style>

Follow below div structure

Browser support

Supports across the all standard browsers with latest versions.

Here you will find complete guide about background blur, which tags and style properties we used.
Add more beauty to your site by using this, use this simple code follow the below steps.

When we hover over on a image then the original image is revealed.

How to create a fixed footer and fly on the body – Amazing effect

Fixed footer is going to show you, how to create a footer and its reveal effects on page scroll down using CSS. Normally, we need JavaScript to perform scrolling effects related to different user actions on web pages.

A beautiful website design comes from each and every element, a single element works with right property. Small animations and good color combination gives a beautiful website. Here

We need to create a footer that appears from bottom of the page while the user is scrolling down. Also, when they are scrolling the page up the footer needs to be hidden bottom of the page again.

To achieve this goal, first we have to create a footer with fixed position at the bottom of the screen and add some content and a footer to the page .

HTML

 <div class="container" style="margin-bottom:370px;position:relative;z-index:10;background:#fff;">
   <div class="content" style="padding:30px;">  
    Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down	<br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/> 
   </div>
   <div>
	  <img src="content.png" width="100%" style="display:block;" />
	</div>
 </div>
 <div class="content-footer">
  <img src="footer.png" width="100%" style="display:block;" />
 </div>

Give width and height to the footer, and fix its position to the bottom of the screen with the position:fixed; and bottom:0; properties.

Set the margin-bottom of the <body> tag equal to the height of the footer .

CSS

 <style>
 body{margin:0px;}
 .content-footer {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0;
    padding: 0px 0 0;
    z-index:1;
    -webkit-transform: translate3d(0,0,0);
    background: #fff;
}
 </style>

In this code we used two images. In the body we used one image and in the footer we used another image.

Executed By using position property, Here we will apply position fixed and position relative.

How does it works ?

Its very easy to use follow the below steps.

step1

copy css and paste in style.css page or paste under head tag.

step2

add div structure in body page

Out Put

This way there will be enough space at the bottom for the footer to be visible when the user scrolls down the page.

Visibility:hidden vs Display:none

Hidden and None both will show empty result .

First we are creating a box with the help of properties like width, float, marign, padding.

and in that <div> we defined a tag <h5> (heading) to create another box in that we used a properties like width, height, border and visibility:hidden.

The relationship between visibility:hidden & display:none, both will show empty result.

visibility:hidden; will not display the element on the page but will allot space on the page. Whereas, If we take display:none in place of visibility:hidden. then, display:none; Will not display the element and it will not allot space for the element on the page

visibility:hidden simply hides the element but it will occupy space and affect the layout of the document.
display:none also hides the element but will not occupy space. It will not affect the layout of the document.

visibility:hidden the tag is not visible,but space is allocated for it on the page.
display:none the tag in the question will not appear on the page at all, but no space is allocated between the other tags

visibility:hidden the object still takes up vertical height on the page, text will remain in the same location.
display:none it is completely removed, if you have text beneath an image – then the text will shift up to fill the space where image was.

visibility:hidden will hide the element & preserve elements space.
display:none will hide the element & collapse the space is taking up.

visibility:hidden is hidden, the browser will take space on the page even it is invisible. display:none doesn’t allocate space on the page.

visibility:hidden works in old browsers.
display:none doesn’t.

Visibility: Hidden Display:None
hidden simply hides the element but it will occupy space and affect the layout of the document. none also hides the element but will not occupy space. It will not affect the layout of the document.
hidden the tag is not visible,but space is allocated for it on the page. none the tag in the question will not appear on the page at all,but no space is allocated between the other tags
hidden the object still takes up vertical height on the page,text will remain in the same location. none it is completely removed ,if you have text beneath an image -then the text will shift up to fill the space where image was.
hidden will hide the element & preserve elements space. none will hide the element & collapse the space is taking up.
hidden is hidden, the browser will take space on the page even it is invisible. none doesn’t allocate space on the page.
hidden works in old browsers. none doesn’t.
<div style="margin:50px;">
 <div style="background:#f9cc9d;border:1px solid #000;padding:30px;width:200px;float:left;">
     <h5 style="margin-top:0px;"> No style apply </h5>
	 <div style="background:#c3d08b;border:1px dashed #000;padding:20px;">
	   Lorem Ipsum Content
	 </div>	 
  </div>
  <div style="background:#f9cc9d;border:1px solid #000;padding:30px;width:200px;float:left;margin-left:20px;">
     <h5 style="margin-top:0px;"> Visibility : Hidden</h5>
	 <div style="background:#c3d08b;border:1px dashed #000;padding:20px;visibility:hidden;">
	   Lorem Ipsum Content
	 </div>	 
  </div>
  
  <div style="background:#f9cc9d;border:1px solid #000;padding:30px;width:200px;float:left;margin-left:20px;">
     <h5 style="margin-top:0px;"> Display : None</h5>
	 <div style="background:#c3d08b;width:150px;height:150px;border:1px dashed #000;display:none;">
	   Lorem Ipsum Content
	 </div>	 
  </div>
  
  <div style="clear:both;"></div>
</div>

the above example is help to you and save some time when implementing it.

Output

visibility:hidden; will not display the element on the page but will allot space on the page. display:none; will neither display the element nor will it allot space for the element on the page

Demo

Footer is always stays at bottom

The container div that surrounds everything. Inside that are three more divs; a header, a body and a footer.

When an HTML page contains a small amount of content, the footer can sometimes display on half of the page and leaving a blank space below. This can look bad, particularly on a large screen.

So, to avoid that problem

The footer has a set height in pixels (or rem). The div is absolutely positioned bottom:0; this moves it to the bottom of the container div.

When there is small content on the page the container div is exactly the height of the browser view port (because of the min-height:100%;) and the footer display neatly at the bottom of the screen.

When there is more than a page of content the container div becomes larger and extends down below the bottom of the viewport – the footer is still positioned at the bottom of the container div but this time you need to scroll down to the end of the page to see it. The footer is also set to width:100%; so it stretches across the whole page.

HTML

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head> 
<body>
 <div class="container">
   <div class="content">
    content	
   </div>
   <footer class="footer">footer</footer>
 </div>
</body>
</html>

Of course, Which method you choose is entirely up to you, and the specifics of your design.

Mostly, we will face this type of problem in our own product applications,

When we are creating the static templates, we already have minimum required content of every page so we didnt face,

So what is this doing?
Container – sets its minimum height to 100% of the view port height (VH)

Content – sets minimum or maximum content of div and we give a space to div initially. Its having same height of footer is equal to padding-bottom of content.
footer – sets the height of div.

Compatible browsers

Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8

Cross Devices

works in all devices Mobile,Tab and Desktop

w3c standard css

100% valid css

No javascript and Jquery required

Free Demo & Download

How does it works ?

Its very easy to use follow the below steps.

Step1

copy CSSand paste in style.css page or paste under head tag.

<style>
 .container {
  position: relative;
  min-height: 100vh;
}
.content {
  padding-bottom: 2.5rem;    /* Footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
 </style>

Step2

Add div structure in body page

<div class="container">
   <div class="content">
    content	
   </div>
   <footer class="footer">footer</footer>
 </div>

The above example is help to you and save some time when implementing it.

Output

The footer is placed at the bottom of the page.

How to create an Awesome Particle Animation

In this post will show you how to create an animated particle background. Particle animation is a great alternative to standard hero sections on a web page; you might have seen them used on sites

we are defining a class called slide and we are using a property display : none.

The main concept here is that there are some particles on the canvas which start attracting other when they come close to each other. Also, they’ll start drawing lines between them as they come closer to each other and the opacity of the lines depends upon the distance between them when we mouse hover .

Amazing particle animation now is in your hand. Finally i brought the code after long search.
you can put your own image/logo in this place, apply the above code.

HTML5 & CSS3 has introduced number of possibilities for UX designers and UI developers.
Awesome Transition effects, Two lines of code give you Reliance of happiness when executed.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Particle Animation </title>
  <style>
  html,
body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html .slides,
body .slides,
html > .dg,
body > .dg {
  display: none;
}
@media (min-width: 1000px) {
  body > .dg {
    display: block;
  }
}
</style>  
</head>  
<script  src="js/index.js"></script>
</html>

Colors & Settings

You can change / apply any color to the particles. you can manage speed and distance of particles.

CSS

html,
body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html .slides,
body .slides,
html > .dg,
body > .dg {
  display: none;
}
@media (min-width: 1000px) {
  body > .dg {
    display: block;
  }
}

index.js

var init = function(){
  var isMobile = navigator.userAgent &&
    navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
  var isSmall = window.innerWidth < 1000;
  
  var ps = new ParticleSlider({
    ptlGap: isMobile || isSmall ? 3 : 0,
    ptlSize: isMobile || isSmall ? 3 : 1,
    width: 1e9,
    height: 1e9
  });
    
  var gui = new dat.GUI();
  gui.add(ps, 'ptlGap').min(0).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'ptlSize').min(1).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'restless');
  gui.addColor(ps, 'color').onChange(function(value){
    ps.monochrome = true;
    ps.setColor(value);
	  ps.init(true);
  });
  
  (window.addEventListener
   ? window.addEventListener('click', function(){ps.init(true)}, false)
   : window.onclick = function(){ps.init(true)});
}

var initParticleSlider = function(){
  var psScript = document.createElement('script');
  (psScript.addEventListener
    ? psScript.addEventListener('load', init, false)
    : psScript.onload = init);
  psScript.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/ps-0.9.js';
	psScript.setAttribute('type', 'text/javascript');
  document.body.appendChild(psScript);
}
    
(window.addEventListener
  ? window.addEventListener('load', initParticleSlider, false)
  : window.onload = initParticleSlider);

How does it works ?

Very simple to use this code.

Step1

a. Convert your image to svg.
b. SVG to Data URI converter
source:https://codepen.io/elliz/pen/ygvgay

Step2

Apply code and Move mouse on image.

Bootstrap Hamburger Menu

Simple Hamburger Menu navigation using javascript only, Menu icon active/inactive identification is very simple now. Just using this snippet. Finally i get easy code.

I’m trying to make a custom javascript toggle function differentiate with active and inactive. Now, How can I shuffle these functions to make them toggle

In Html5 we have one new element known as <nav> tag. It is used to define a block of navigation links.

The classes are define with in the <div> tag. In that tag we defined a class called nav-toggle.

nav-toggle class defined another class called nav-toggle-bar. This class used to display toggle icon on the screen. We are also using java script because it is used to click event function.

HTML

<div class="nav-toggle">
	<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
	<ul>
	    <li><a href="#">Home</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

CSS

<style>
  .nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 2rem;
  left: 2rem;
  position: fixed;
  top: 2rem;
  width:2rem;
  z-index: 2; }
  .nav-toggle:hover {
    opacity: 0.8; }
  .nav-toggle .nav-toggle-bar,
  .nav-toggle .nav-toggle-bar::after,
  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background:#000;
    content: '';
    height:2px;
    width: 100%; }
  .nav-toggle .nav-toggle-bar {
    margin-top: 0; }
  .nav-toggle .nav-toggle-bar::after {
    margin-top: 0.8rem; }
  .nav-toggle .nav-toggle-bar::before {
    margin-top: -0.8rem; }
  .nav-toggle.expanded .nav-toggle-bar {
    background: transparent; }
  .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: white;
    margin-top: 0; }
  .nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

/* nav */
.nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #000;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: -25rem;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed;
  top: 0;
  width: 20rem;
  z-index: 1; }
  .nav.expanded {
    left: 0; }
  .nav ul {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0; }
.nav.expanded li a{color:#fff;text-decoration:none;font-size:32px;}
.nav.expanded li{margin-bottom:20px;}
 </style>

Java script

<script>
 (function() {
	var hamburger = {
		navToggle: document.querySelector('.nav-toggle'),
		nav: document.querySelector('nav'),

		doToggle: function(e) {
			e.preventDefault();
			this.navToggle.classList.toggle('expanded');
			this.nav.classList.toggle('expanded');
		}
	};

	hamburger.navToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
 </script>
Hamburger menu icon
after Active Hamburger menu

Finally out put will when we click on the toggle icon that will open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the side nav is opened.

How does it works,
Its very simple use this

Step1

copy and paste style properties in your style file

<style>
  .nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 2rem;
  left: 2rem;
  position: fixed;
  top: 2rem;
  width:2rem;
  z-index: 2; }
  .nav-toggle:hover {
    opacity: 0.8; }
  .nav-toggle .nav-toggle-bar,
  .nav-toggle .nav-toggle-bar::after,
  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background:#000;
    content: '';
    height:2px;
    width: 100%; }
  .nav-toggle .nav-toggle-bar {
    margin-top: 0; }
  .nav-toggle .nav-toggle-bar::after {
    margin-top: 0.8rem; }
  .nav-toggle .nav-toggle-bar::before {
    margin-top: -0.8rem; }
  .nav-toggle.expanded .nav-toggle-bar {
    background: transparent; }
  .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: white;
    margin-top: 0; }
  .nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

/* nav */
.nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #000;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: -25rem;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed;
  top: 0;
  width: 20rem;
  z-index: 1; }
  .nav.expanded {
    left: 0; }
  .nav ul {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0; }
.nav.expanded li a{color:#fff;text-decoration:none;font-size:32px;}
.nav.expanded li{margin-bottom:20px;}
 </style>

Step2

Follow the below div structure where you want in header

<div class="nav-toggle">
	<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
	<ul>
	        <li><a href="#">Home</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Background image using as a Text color with background clip

Bring your own styles and apply own background images, videos and gif to text !!!

Background-clip: Text is used to apply a background, to the text and defined how far the background (color or image) should extend within an element.

HTML5 & CSS3 has introduced number of possibilities for UX designers and UX developers.

Awesome Transition effects, Two lines of code give you Triliance of happiness when executed.

9 Hours of difficulties overlaps with the happiness in last 9 seconds. Its only happen in Web Design & Development.

You have to apply background-clip property to the page background which you want to clip

Step by Step process. How to add background clip text css effect animation to my web page.

Steps:

The class attribute is used to define equal styles for elements with the same class name.So, all HTML elements with the same class attribute will have the same format and style.

The classes are defined with in <div> tag

We used a class called bg_image in that class we defined some properties like background-size:cover; background-clip:text; and background image by using those properties we will get background to the text.

We defined another class called fg_text that class fg_text is used to defined the font-size, font-weight, text-align, and color of the text(This is some text). The class fg_text is defined inside the class bg_image.

CSS

.bg_image {
  background: url('https://www.clovetech.com/uploads/slider/careers.png');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  text-align:center;
}

.fg_text { 
  font-size:6em;
  font-weight: bold;
  text-align: center;
   color: transparent;
}

HTML

<div class="bg_image">
  <div class="fg_text">This is some text</div>
</div>
By Using Background image,
<img>
By Using Background Video
<video>
By Using Background Gif
<gif>

How does it works?

It’s very simple to integrate & easy to use, Follow the below steps order

Step1

Copy the below style properties and paste any where in the page

.bg_image {
  background: url('https://www.clovetech.com/uploads/slider/careers.png');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  text-align:center;
}

.fg_text { 
  font-size:12em;
  font-weight: bold;
  text-align: center;
   color: transparent;
}

Step2

Copy and paste div structure under body tag.

<div class="bg_image">
 <div class="fg_text">This is some text</div>
</div>

How to freeze first column of table in html

How to freeze first column of table in html, If the table content is more and adding number of columns, Many web designers creating responsive HTML tables. 

It is very uncomfortable to scroll horizontally to see the table rows.

By adding this, You can see all columns of div without any frustration. So fixed the column of table using only CSS. 

Description:

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag, it is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

The <html> element is the root element of an HTML page, the <head> element contains meta information and <title> element specifies a title for the document. The <style> tag is used to define style information for an HTML document.

The <body> tag defines the document’s body, it contains all the contents of an HTML document.

The <div> tag defines a division or a section in an HTML document and the div element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
}

In HTML, table is defined with the <table> tag where each table row is defined with the <tr> tag.

A table header is defined with the <th> tag and table data/cell is defined with the <td> tag.In the Table we defined a <tr> tag.<tr>tag is defined a class called headcol. headcol class is defined with styles like

position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;

By using this style we can freeze first column of the table.<td> tag defined a class called long. long class defined the background color in CSS.

HTML

<div>
<table>
        <tr><th class="headcol">1</th>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        </tr>
        <tr><th class="headcol">2</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">3</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">4</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">5</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">6</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
</table>
</div>

How does it works –

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
}
</style>
</head>
<body>

<div>
<table>
        <tr><th class="headcol">1</th>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        </tr>
        <tr><th class="headcol">2</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">3</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">4</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">5</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">6</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
</table>
</div>
</body>
</html>

Output

A table with rows and columns with a scroll bar and freezing first column of table using CSS.