Purpose of the w3resource Gallery is to show web design and development related awesome stuff. View the demo, browse the code, download it and play around.
This tutorial shows how to create tooltips with CSS only, without using any JavaScript code. You can achieve this with hint.css. Live Demo Please upgrade your browser You may download the hint.css or the minified version of it from here and here. To create the tooltips shown above, we start with an HTML page addingContinue….
Form validation is very part of developing web applications and w3resource has several form validation tutorials. This tutorial is about how to validate form on client side using Parsely.js. It is a project which allows you to add validation for front end without writing any JavaScript code. Live Demo Please upgrade your browser We createContinue….
With CSS3 text-shadow property, it is much more easier now to create text effects like glowing effect, blurring effect, outlining, flaming effect etc. This document shows how to create text effects with CSS3 text shadow property. Live Demo Please upgrade your browser CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
#glowing { width: 300px; height: 70px; font-size: 300%; background-color:#333333; color: #FFF; text-align:center; text-shadow: 0 0 .2em white, 0 0 .5em white; } #outlining { width: 300px; height: 70px; font-size: 300%; background-color:#ADADAD; text-align:center; color:#00366C; text-shadow: 0 1px 1px white, 1px 0 1px white, -1px 0 1px white, 0 -1px 1px white, 1px 1px 1px white, -1px 1px 1px white, -1px 1px 1px white, -1px -1px 1px white; } #bluring { width: 300px; height: 70px; font-size: 300%; background-color:#333333; text-align:center; color:transparent; text-shadow:0 0 .2em white; } #flaming { width: 300px; height: 70px; font-size: 300%; padding-top: 40px; background-color:#333333; text-align:center; color:#FFFFFF; text-shadow: 0 0 4px white, 0 -5px 4px #FF3, 2px -10px 6px #FD3, -2px -15px 11px #F80, 2px -25px 18px #F20; } |
HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html> <head> <title>Text effects with CSS3 text shadow property</title> <meta charset="utf-8" /> <meta name="Keywords" content="css3, text shadow, text effects" /> <meta name="Description" content="Creating text effects with CSS3 text shadow property" /> <link rel='stylesheet' href='text-shadow.css' type='text/css' /> </head> <body> <p id="glowing"> Glowing effect </p> <p id="outlining"> Outline effect </p> <p id="bluring"> Blur effect </p> <p id="flaming"> Flaming effect </p> </body> </html> |
Download Code Share this in Google+, LikeContinue….
This gallery item presents a Twitter Bootstrap based simple table generator. If you are new to front end development, this may help you to understand how to create and manipulate DOM with JavaScript. For others, we hope that it may come handy when you need to create HTML tables quickly for your next project. MakeContinue….
Using spin.js, a simple and light JavaScript library, you can create an animated CSS activity. It uses CSS3 keyframe animation, but the good point is, it also uses Vector Markup Language as fallback. Live Demo Please upgrade your browser HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Example of spin.js</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .spinner { margin-top: 100px; } .well { margin-top: 20px;} .stopnstart {margin: 250px 0 0 180px;} </style> </head> <body> <div class="container"> <div class="row"> <div class="span6"> <div id="spin"> </div> <p class="stopnstart"><button type="submit" class="btn btn-danger" onClick="spin_stop();" id="stop">Stop</button> <button type="submit" class="btn btn-success" onClick="spin_start();" id="start">Start</button></p> </div> </div> </div> <script type="text/javascript" src="spin.js"></script> <script type="text/javascript"> var opts = { lines: 20, // The number of lines to draw length: 50, // The length of each line width: 10, // The line thickness radius: 10, // The radius of the inner circle rotate: 0, // The rotation offset color: '#000', // #rgb or #rrggbb speed: 1, // Rounds per second trail: 60, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; var target = document.getElementById('spin'); var spinner = new Spinner(opts).spin(target); function spin_stop() { spinner.stop(); } function spin_start() { spinner.spin(target); } </script> </body> </html> |
Download Code Please Google+, Like this tutorial on FaceBook, Tweet, save it asContinue….
Using Markdown, you can write content in plain text and then convert it to HTML. Write Paragraphs Plain text
|
1 2 3 4 5 6 7 8 9 10 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
Write Headings Plain text
|
1 2 3 4 5 6 7 8 9 10 11 |
This is H1 ========== This is H1 ---------- #This is H1 ###This is H3 ######This is H6 |
HTML
|
1 2 3 4 5 6 7 8 9 |
<h1>This is H1</h1> <h2>This is H1</h2> <h1>This is H1</h1> <h3>This is H3</h3> <h6>This is H6</h6> |
Write Blockquotes Plain text
|
1 |
>A friend is one who has the same enemies as you have. |
HTML
|
1 2 3 |
<blockquote> <p>A friend is one who has the same enemies as you have.</p> </blockquote> |
Write Lists Plain text
|
1 2 3 4 5 6 7 8 9 10 11 |
* PHP * Python * Ruby + PHP + Python + Ruby 1. PHP 2. Python 3. Ruby |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ul> <li>PHP</li> <li>Python</li> <li>Ruby</li> </ul> <ul> <li>PHP</li> <li>Python</li> <li>Ruby</li> </ul> <ol> <li>PHP</li> <li>Python</li> <li>Ruby</li> </ol> |
Write Code Plain text
|
1 |
<?php echo "what are you doing?"; ?> |
HTML
|
1 2 |
<pre><code><?php echo "what are you doing?"; ?> </code></pre> |
Write Horizontal rules Plain textContinue….
With CSS3 box-shadow property, you can create drop shadows and add several features to it. Live Demo Please upgrade your browser CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.myshadow1 { width: 300px; height: 200px; background: #666; margin-top: .5em; -moz-box-shadow:10px 5px 15px rgba(0,0,0,.5); -webkit-box-shadow:10px 5px 15px rgba(0,0,0,.5); box-shadow: 10px 5px 15px rgba(0,0,0,.5); /*10px is horizontal offset, 5px is vertical offset, 15px is blur radius and rgba(0,0,0,.5) is shadow color*/ margin-bottom: 30px; } .myshadow2 { width: 300px; height: 200px; background: #666; margin-top: .5em; box-shadow: 10px 5px 15px black inset; /*10px is horizontal offset, 5px is vertical offset, 15px is blur radius. black is shadow color and inset specifies that the shadow is drawn inside the box*/ margin-bottom: 30px; } .myshadow3 { width: 300px; height: 200px; background: #666; margin-top: .5em; box-shadow: 20px 20px 15px -15px #b5f742; /* 20px is horizontal offset, 20px is vertical offset, 15px is blur radius, -15px is spread distance and #b5f742 is shadow color */ margin-bottom: 50px; } .myshadow4 { width: 300px; height: 200px; background: #666; margin-top: .5em; box-shadow: 0 2px 6px rgba(0,0,0, .5), 0 1px rgba(255,255,255, .3) inset, 0 10px rgba(255,255,255, .2) inset, 0 10px 20px rgba(255,255,255, .25) inset, 0 -15px 30px rgba(0,0,0, .3); /* this is for multiple shadows */ } |
HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Example of CSS3 Dropshadow, prepared by w3resource</title> <link href="dropshadow.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="myshadow1"></div> <div class="myshadow2"></div> <div class="myshadow3"></div> <div class="myshadow4"></div> </body> </html> |
Download Code Please Google+, Like this tutorial on FaceBook, Tweet, save it as bookmark and subscribe with our Feed. And use our comment section to say what youContinue….
With CSS3 you may create rounded corners with border radius property. And this helps you to get rid of the hassles of creating rounded corners with images and lots of divs. Live Demo Please upgrade your browser HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html> <head> <title>CSS3 border radius to create rounded corners</title> <meta charset="utf-8" /> <meta name="Keywords" content="css3, border radius, rounded corners" /> <meta name="Description" content="Example of CSS3 border radius to create rounded corners" /> <link rel='stylesheet' href='rounded-corners.css' type='text/css' /> </head> <body> <div class="exampleone"> </div> <div class="exampletwo"> </div> <div class="examplethree"> </div> <div class="examplefour"> </div> </body> </html> |
CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.exampleone { width: 200px; height: 150px; background:#669900; margin: 10px; border-radius: 15px; -moz-border-radius: 15px; } .exampletwo { width: 200px; height: 150px; background:#669900; margin: 10px; border-radius: 15px / 30px; -moz-border-radius: 15px / 30px; } .examplethree { width: 200px; height: 150px; background:#669900; margin: 10px; border-radius: 15px 30px; -moz-border-radius: 15px 30px; } .examplethree { width: 200px; height: 150px; background:#669900; margin: 10px; border-radius: 20px 50% 0; -moz-border-radius: 20px 50% 0; } .examplefour { width: 200px; height: 150px; background:#669900; margin: 10px; border-radius: 20px 50% 0 15px; -moz-border-radius: 20px 50% 0 15px; } |
Download Code Please Google+, Like this tutorial on FaceBook, Tweet, save itContinue….
With CSS3, you may use RGBA and HSLA to create translucent colors. This is an example of how you may do that. Live Demo Please upgrade your browser HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <head> <title>CSS3 Translucent color with RGBA and HSLA</title> <meta charset="utf-8" /> <meta name="Keywords" content="css3, Translucent color, RGBA, HSLA" /> <meta name="Description" content="Example of CSS3 Translucent color with RGBA and HSLA" /> <link rel='stylesheet' href='translucent.css' type='text/css' /> </head> <body> <p class="translucent-color"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus dolor et arcu gravida sed cursus elit lobortis. Fusce molestie mauris sed ipsum sodales laoreet. Duis commodo suscipit magna sit amet fermentum. Vivamus at neque in eros ultricies cursus. Pellentesque purus odio, gravida id tincidunt eget, placerat at odio. Phasellus diam leo, consequat ac venenatis id, egestas a metus. Nulla dictum orci odio, vitae ullamcorper lorem. Pellentesque rhoncus nunc vitae leo facilisis et eleifend nisi gravida. Phasellus iaculis hendrerit quam at lacinia. Cras sapien enim, tempor id tempor eget, pharetra ut leo. In quis velit nec cursus eu orci. Quisque dictum, purus tempor accumsan sodales, quam orci consequat ipsum, sed sodales enim magna quis dui. Integer ac turpis arcu, sed scelerisque erat. Proin felis urna, eleifend nec pretium ac, suscipit consequat leo. </p> </body> </html> |
CSS Code
|
1 2 3 4 5 6 |
.translucent-color { background: hsla(200, 100%, 50%, .5); /* 324, 100%, 50% are HSL values. .5 is opacity */ border: 1em solid rgba(240, 240, 240, .3); /* 0, 0, 0 are RGB values. .3 is opacity */ color: rgba(0, 0, 191, .8); /* 255, 255, 255 are RGB values. .3 is opacity */ padding: 7px; } |
Download Code Browser compatibility We found this code working on Google Chrome 19.0.1084.46 m, Firefox 11.0, Opera 11.62 and Safari 5.1.7.Continue….
Want to create a Full Screen View of your image or video? W3c provides a Fullscreen API for that, and screenfull.js is a “Simple wrapper for cross-browser usage of the JavaScript Fullscreen API”. You may find the original Github page here. View live demo Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!doctype html> <html lang="en" itemscope itemtype="http://schema.org/Product"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="author" content="Sindre Sorhus"> <meta name="description" content="JavaScript Fullscreen API demo"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta itemprop="name" content="screenfull.js"> <meta itemprop="description" content="Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too."> <title>screenfull.js demo</title> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link href="bootstrap.css" rel="stylesheet"> </head> <body> <section id="container" class="container"> <header> <h1>View images and videos fullscreen with screenfull.js</h1> </header> <hr> <section> <p>Click the image to make it fullscreen</p> <img width="400" height="206" id="demo-img" src="http://www.w3resource.com/images/layout.png"> </section> <hr> <section> <p>Click the video to make it fullscreen</p> <video id="demo-video" width="350" height="300" poster="video.png" controls> <source src="http://www.w3resource.com/video-tutorial/javascript/form-validation.mp4"> </video> <small>Press Esc to exit</small> </section> </section> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="src/screenfull.js"></script> <script> $(function() { $('#supported').text( 'Supported: ' + !!screenfull ); if ( !screenfull ) { return false; } $('#request').click(function() { screenfull.request( $('#container')[0] ); // Does not require jQuery, can be used like this too: // screenfull.request( document.getElementById('container') ); }); $('#exit').click(function() { screenfull.exit(); }); $('#toggle').click(function() { screenfull.toggle( $('#container')[0] ); }); $('#request2').click(function() { screenfull.request(); }); $('#demo-img').click(function() { screenfull.toggle( this ); }) $('#demo-video').click(function() { screenfull.toggle( this ); }) screenfull.onchange = function( e ) { $('#status').text( 'Is fullscreen: ' + screenfull.isFullscreen ); var elem = screenfull.element; if ( elem ) { $('#element').text( 'Element: ' + elem.localName + ( elem.id ? '#' + elem.id : '' ) ); } }; // Trigger the onchange() to set the initial values screenfull.onchange(); }); </script> </body> </html> |
Download Code Please Google+, Like this tutorial on FaceBook,Continue….
Subcribe to our RSS Feed