Codding Hub @coddinghubit - Tumblr Blog

Author: zomigi Views Total: 9,410 views Official Page: Go to website Last Update: October 3, 2014 License: MIT Preview: Description: A mobile app-style vertical sidebar off-canvas navigation system created by zomigi that is made only with CSS & CSS3. It uses flexbox to control the layout so that when the menu becomes visible, the content area can resize to fit the remaining width in the viewport, instead of overflowing the viewport and getting cut off on the right side, as happens with most off-canvas menus. See also Pure HTML5 / CSS3 Cross-fading SlideshowBasic Usage: Create a hamburger icon for the menu toggle button…

#pure

Author: VincentCostentin Views Total: 21,961 views Official Page: Go to website Last Update: October 12, 2014 License: MIT Preview: Description: A pure CSS solution made by VincentCostentin to popup a circle (radial menu) around the toggle button, based upon CSS3 transitions and transforms. Basic Usage: Create a menu with a hamburg toggle button as follows. The core CSS/CSS3 styles .menu_opener { display: none; } .menu_opener:checked ~ .link_one { top: 65px; } .menu_opener:checked ~ .link_two { left: 385px; }…

#"#transitions

Author: asciimoo Views Total: 7,906 views Official Page: Go to website Last Update: October 24, 2014 License: MIT Preview: Description: cssplot is a CSS plotting library that makes it easy to draw responsive bar charts & scatter plots with pure Html5 & CSS. Basic usage: Load the cssplot.full.css in the head section of your document. Create a basic bar chart with Html unordered list. Use Html5 data-cp-size attribute to specify the value/height for each column. You can also use class="chart-column" style="height: 50% instead of data-cp-size="50". 99% 50% 30% 90% 10% 70%

#responsive

Author: designcouch Views Total: 2,353 views Official Page: Go to website Last Update: July 20, 2014 License: MIT Preview: Description: A simple CSS3 animated tooltip that displays content from Html5 data-description attribute of any Html elements. How to use it: Create an Html element with an unique ID ‘tooltip’ and use data-description attribute to declare the tooltip content. I have a tooltip. The required CSS to style & animate the tooltip. #tooltip { width: 350px; font-family: Helvetica, Arial, sans-serif; font-weight: 100; font-size: 20px; text-align: center; padding: 50px; margin: 100px auto; background: white; position: relative; border-radius:…

#tooltip

Author: Aldlevine Views Total: 17,308 views Official Page: Go to website Last Update: July 21, 2014 License: MIT Preview: Description: A vertical tabs UI which allows you to swap between content panels with subtle CSS3 based animations. It’s good for creating a full-page responsive navigation system for your web site. How to use it: Create a set of radio inputs & labels for the tabs. Create the content panels for the…

#vertical

Author: designcouch Views Total: 19,289 views Official Page: Go to website Last Update: July 28, 2014 License: MIT Preview: Description: A pure CSS solution to create animated iOS 7 style switches with labels using CSS3 box-shadow and transition properties. How to use it: Create a regular checkbox that will be converted into a iOS 7 style switch button. The core CSS styles. .ios-toggle, .ios-toggle:active { position: absolute; top: -5000px; height: 0; width: 0; opacity: 0; border: none; outline: none; } .checkbox-label { display: block; position: relative; padding: 10px; margin-bottom:…

#switches

Author: midoghranek Views Total: 8,500 views Official Page: Go to website Last Update: August 5, 2014 License: MIT Preview: Description: An vertical side navigation bar with cool CSS3 based on-hover effects that is sticky on the left or right side of your browser window while scrolling the page. Created by Mohamed Abo El-Ghranek. How to use it: Include the Font Awesome 4 in the head for navigation icons. Create the Html for a navigation bar as follows. Home CSS3 …

#">#sticky

Author: japandan Views Total: 1,324 views Official Page: Go to website Last Update: August 12, 2014 License: MIT Preview: Description: How to use it: Create the Html for a loading spinner as follows. The core CSS styles for the loading spinner. .spinner, .spinnerlarge, .spinnermedium { position: absolute; top: 0; bottom: 0; left: -300px; right: 0; margin: auto; background-color: #C00; border-radius: 50%; overflow: hidden; } .spinner { height: 50px; /* Just change W&H */ width: 50px; } .highlighttopl { position: absolute; bottom: 0;…

#C00;C00;#spinner

Author: aaronchuo Views Total: 4,180 views Official Page: Go to website Last Update: September 21, 2014 License: MIT Preview: Description: A cool Scifi-style tabs widget which allows to swap between content sections by clicking on the radio button based tabs. Created by aaronchuo. How to use it: Create a tabs interface using Html lists and radio buttons as shown below. Tab1 Section1 Tab2 Section2 Tab3 Section3 …

#tabs

Author: dp_lewis Views Total: 12,276 views Official Page: Go to website Last Update: June 30, 2014 License: Unknown Preview: Description: A simple and fully responsive content slider with CSS3 transitions and keyboard & arrows navigation, built with plain Html and pure CSS/CSS3. Created by dp_lewis. How to use it: Build the Html structure for a content slider as follows. Slide 1 Slide 2 Slide 3 Slide 4 The required CSS to…

#slider

Author: yorozuna Views Total: 16,629 views Official Page: Go to website Last Update: July 2, 2014 License: Unknown Preview: Description: A simple accordion navigation menu built with only CSS and animated by CSS3 transitions. How to use it: Build the structure for an accordion menu using nested Html unordered lists. Menu 1 Menu 1.1 Menu 1.2 Menu 2 Menu 2.1 Menu 2.2 Menu 2.3 Menu 3 Menu 3.1 Menu 3.2 Menu 3.3 Menu 3.4…

#">Menu #transitions

Author: rthor Views Total: 2,760 views Official Page: Go to website Last Update: July 3, 2014 License: Unknown Preview: Description: A trendy CSS3 based off-canvas navigation with an animated toggle icon that allows to slide out a sidebar navigation panel from the left side of the browser window. No Javascript needed. How to use it: Create the Html for a menu icon to toggle the off-canvas navigation. Animated the menu icon using CSS3 transitions and transforms. .HiddenCheckbox { display: none; } .MenuIcon { cursor: pointer; display: block; float: left; height: 30px; position:…

#toggle

Author: blucube Views Total: 7,403 views Official Page: Go to website Last Update: July 5, 2014 License: Unknown Preview: Description: An animated gradient background using CSS3 box-shadow property and keyframe animations, written in LESS and created by blucube. How to use it: Create three DIV layers for the animated gradient background. The LESS code. @diameter: 45vmax; body { background: #000; } h1 { position: absolute; width: 100%; text-align: center; top: 48vh; color: #fff; font-family: 'Trebuchet MS', Helvetica, sans-serif; letter-spacing: .7em; font-size: 20pt; font-weight: normal; opacity: .2; text-transform: uppercase; } div { position: absolute; width: .001vmin; height: .001vmin;…

#000;#fff;000;#fff;#pure

Author: pdelsignore Views Total: 79,037 views Official Page: Go to website Last Update: July 17, 2014 License: Unknown Preview: Description: With the CSS3 transitions and transforms, we can add a full overlay on an image that reveals animated text captions on hover. Created by pdelsignore. How to use it: Insert an image and text captions in a container element with CSS class of ‘box’. Title Tagline The CSS for the image and the container element. .box { cursor: pointer; height: 300px; position: relative; overflow: hidden;…

#text

Author: alexsafayan Views Total: 14,099 views Official Page: Go to website Last Update: July 19, 2014 License: MIT Preview: Description: Converts Html5 input type=range into a nice flat styled range slider built on top of pure CSS/CSS3. Created by AlexSafayan. How to use it: Create a standard Html5 range input in your document. The CSS to style the range input as a range slider. input { -webkit-appearance: none; width: 160px; height: 20px; margin: 10px 50px; background: linear-gradient(to right, #16a085 0%, #16a085 100%); background-size: 150px 10px; background-position: center; background-repeat: no-repeat; overflow: hidden; outline: none; zoom: 130%; display: block;…

#16a085 #16a08516a085 #slider

Author: eliwilliamson Views Total: 6,841 views Official Page: Go to website Last Update: July 11, 2014 License: Unknown Preview: Description: A creative and fully responsive triangle/diamond grid layout using CSS3 transitions, transforms and media queries. Built by eliwilliamson. How to use it: Include the necessary modernizr.js Javascript library in the head section of your web page. Create a grid layout following the markup structure like this. CSS script CSS

#"#trianglediamond

Author: viktorbezdek Views Total: 1,628 views Official Page: Go to website Last Update: June 5, 2014 License: Unknown Preview: Description: A simple fashion clock, built on top of Javascript, CSS, CSS3 transforms, to display the current local time on your website. How to use it: Create the Html for a time clock. The CSS/CSS3 rules. .clock { position: relative; left: 50%; margin-left: -200px; margin-top: 50px; width: 400px; height: 400px; background: #45484d; background: -webkit-radial-gradient(center, ellipse, #45484d 0%, #000000 100%); background: radial-gradient(ellipse at center, #45484d 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d',…

#45484d;#45484d #000000 #45484d'#…#simple

Trending Blogs

Recently Viewed Blogs

Codding Hub