Posts

Showing posts with the label CSS Coding

CSS link with no underline

-
Image
CSS  link with no underline <!DOCTYPE html> <html> <head> <style> a {     text-decoration: none; } </style> </head> <body> <p>A link with no underline: <a href="https://yaakdevelopers.blogspot.com">Yaak Developers</a></p> </body> </html>
Post a Comment
Read more

CSS Text Decoration

-
Image
CSS Text Decoration <!DOCTYPE html> <html> <head> <style> h1 {     text-decoration: overline; } h2 {     text-decoration: line-through; } h3 {     text-decoration: underline; } </style> </head> <body> <h1>Line 1</h1> <h2>Line 2</h2> <h3>Line 3</h3> </body> </html>
Post a Comment
Read more

CSS Set the height and width of an element

-
Image
CSS Set the height and width of an element    <!DOCTYPE html> <html> <head> <style> div {     height: 200px;     width: 600px;     background-color: yellow; } </style> </head> <body> <h2>Set the height and width of an element</h2> <p>This div element has a height of 200px and a width of 600px:</p> <div></div> </body> </html>
Post a Comment
Read more

CSS Using individual padding properties

-
Image
CSS Using individual padding properties <!DOCTYPE html> <html> <head> <style> div {     border: 2px solid black;     background-color: lightblue;     padding-top: 60px;     padding-right: 40px;     padding-bottom: 60px;     padding-left: 90px; } </style> </head> <body> <h2>Using individual padding properties</h2> <div>This div element has a top padding of 60px, a right padding of 40px, a bottom padding of 60px, and a left padding of 90px.</div> </body> </html>
Post a Comment
Read more

CSS Coding for Circular Loader

-
CSS Coding for Circular Loader #loader{ margin-left:200px; margin-top:100px; }
Post a Comment
Read more

CSS Coding for Social Sharing

-
CSS Coding for Social Sharing @import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'; body {   background-color:#e5e7e7; } .SocialIcons {   position:absolute;   top:50%;   left:50%;   display: inline-block;   -ms-transform:translate(-50%,-50%);   -webkit-transform:translate(-50%,-50%);   transform:translate(-50%,-50%); } /* Icons */ .SocialIcons a {   color:#fff;   display: inline-block;   width:55px;   height:34px;   padding-top:20px;   margin:0 2px;   border-radius:5px;   text-align:center;   text-decoration:none;   font-family:fontawesome;   position: relative;   -o-transition:all .5s;   -webkit-transition: all .5s;   -moz-transition: all .5s;   transition: all .5s;    -webkit-font-smoothing: antialiased; } .SocialIcons a:hover {   opacity: 0.78; } /* pop-up text */ .Socia...
Post a Comment
Read more

CSS Coding for Analog Clock

-
CSS Coding for Analog Clock .inline-block {   display: -moz-inline-stack;   display: inline-block; } * {   outline: none; } html {   height: 100%; } body {   background: url('http://images.wallpapersmela.com/2014/01/Latest-HD-Technology-Wallpapers-2014.jpg') no-repeat fixed center;   background-size:cover; } body .container {   width: 100%;   max-width: 300px;   margin-right: auto;   margin-left: auto;   font-family: 'helvetica', sans-serif; } .clock {   margin-bottom: 20px;   width: 100%;   padding-bottom: 100%!important;   padding-top: 0!important;   position: relative;   margin-top: 50%;   background-color: #e7e7e7;   -moz-border-radius: 50%;   -o-border-radius: 50%;   -webkit-border-radius: 50%;   border-radius: 50%;   border: 10px solid #333;   opacity:0.97;   -webkit-box-shadow: 1px 10px 50px rgba(0, 0, 0, 0.3), ins...
Post a Comment
Read more