Responsive CSS3 slider without Javascript

 

CSS3 Responsive Slider is, as the name implies, a responsive CSS3 slider without Javascript. The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article. To save our input we are using radio buttons. As mentioned above you could also use :target and anchor links, but it doesn’t mimic Javascript in the same way as you would only be able to handle one action at a time, you would end up with a bunch of items in your history (clicking back would turn the slider back one), and it’s been done before.
Responsive CSS3 Slider Without Javascript

Posted by 홍반장水 홍반장水

Agile CSS3 Engine: Generate pure CSS3 with JavaScript

CSS - Framework - Javascript / Added on July 1, 2014 / Add to favorites

Agile CSS3 Engine lets you generate pure CSS3 animations using JavaScript. It’s easy to use and cross platform compatible.

agile


Agile

Using javascript generated pure CSS3

Agile is a simpe, fast and easy to use engine which uses javascript generated pure CSS3. Check out examples at http://a-jie.github.io/Agile/

Features

  • Agile uses javascript to generate pure CSS3, without canvas, webGL or SVG.
  • Performant on mobile devices, being truly cross platform.
  • Agile’s API has high similar characteristic with actionscript 3.0, you can learn it in 10 minutes.

Usage

Download the minified library and include it in your html document.

<script src="js/agile.min.js"></script>
Posted by 홍반장水 홍반장水

Keyframer: A CSS3 animation tool

keyframer

Posted by 홍반장水 홍반장水
50+ Free jQuery CSS3 Image Hover Effects

 

 

Free jQuery CSS3 Image Hover Effects are an excellent way to add in nice effect to your website projects. In this collection we've gathered the best css3 image hover effects jquery plugins recently published. These Free jQuery CSS3 Image Hover Effects is an effective and creative way of adding professional effects using the latest CSS3 tools.

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. It is currently developed by a team of developers led by Dave Methvin. Used by over 65% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

Today's collection contains 53 Free jQuery CSS3 Image Hover Effects. The CSS markup is commented and you’ll get also a documentation file to help you start working with these hover effects. We hope you enjoy this collection when using it on your latest web design projects.

Advance Hover Effects

Part 2 of the CSS3 hover effects. This one uses new transitions and different coding. 12 different examples with different effects and transitions. All shapes are CSS3 and not images. Also the first animation on the video demo will not work with Google Chrome or Opera. But the other 11 work perfect with all updated browsers. This will only work with updated browsers, IE8 and IE7 is a no go.

Free jQuery CSS3 Image Hover Effects

Auto Post Thumbnail PRO

Auto Post Thumbnail PRO is a plugin to generate Featured Image (AKA Post Thumbnail) from first image in a post or any custom post type. The plugin will also create thumbnails from several popular Video services if it finds a Video embedded in the post.

jQuery-Hover-CSS-Hover-Effects-027

CSS3 Image Hover Effects

This set of 17 Image Hover Effects uses some of the best and newest CSS3 features to showcase your images in a unique way. Each effect comes with variants and in a separate HTML file and the documentation file will help you to integrate them on your website.

jQuery-Hover-CSS-Hover-Effects-003

CSS3 Image Hover Effects Vol.2

After the success of my CSS3 Image Hover Effects, this new set of more advanced 14 effects contains a full range of awesome stuff to showcase your work in a modern and different way. Each effect comes with variants and in a separate HTML file and the documentation file will help you to integrate them on your website.

Free jQuery CSS3 Image Hover Effects

3D Thumbnail Hover Effects

Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.

Free jQuery CSS3 Image Hover Effects

CSS3 Hover Pack

This CSS3 Hover pack contains more than 20 examples of Hover Effects. Few single effects and more combinations to boost creativity. All effects simulate flash and javascript with pure CSS3 . Each effect on each css and html files.

jQuery-Hover-CSS-Hover-Effects-004

Scrollable Thumbs Menu with jQuery

In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. The thumbs are scrollable by moving the mouse up and down which makes a really nice effect. We will add some CSS3 properties for spicing up the looks.

jQuery-Hover-CSS-Hover-Effects-029

jQuery CSS3 Image Hover Effects

CSS3 Image Hover Effects is a jQuery plugin by Fusiondevs.com for adding superb hover effects to your website’s images. Perfect for using on banners, advertisements and custom buttons.

jQuery-Hover-CSS-Hover-Effects-005

Hover Slide Effect with jQuery

Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.

jQuery-Hover-CSS-Hover-Effects-030

Killer CSS3 Image Hover Effects

22 Different Image hover effects using just CSS3 . These effects will give your images and thumbnails a unique and modern effect. Integrating the effects is simple and straight forward. Each effect has a lightbox option where all the code needed for integration resides.

jQuery-Hover-CSS-Hover-Effects-007

Bubbleriffic Image Gallery with jQuery

In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse. Clicking on a thumbnail will zoom in a big circle and the full image which will be automatically resized to fit into the screen. Navigating through the images will slide the current image to the side and make the new one appear in a zoom like fashion.

jQuery-Hover-CSS-Hover-Effects-031

Picanim – jQuery Image Hover Effect Plugin

Picanim is jQuery plugin used to bring stylish image hover effects,it contains more than 27+ unique hover effects and more coming soon.Browser Support:IE(even ie6),Firefox,Opera,Safari,Google Chrome.

jQuery-Hover-CSS-Hover-Effects-008

Sweet Thumbnails Preview Gallery

In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.

jQuery-Hover-CSS-Hover-Effects-032

Zalki Hover Image – Plugin jQuery

Zalki Hover Img – is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container.

Free jQuery CSS3 Image Hover Effects

Thumbnails Preview Slider with jQuery

In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.

jQuery-Hover-CSS-Hover-Effects-033

jQuery Hover Cards

jQuery Hover Cards is a lightweight plugin that gives you the power to create beautiful and interactive hover effects for your images and thumbnails the differ depending on the direction the image was hovered.

jQuery-Hover-CSS-Hover-Effects-010

Original Hover Effects with CSS3

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

jQuery-Hover-CSS-Hover-Effects-034

WP Easy Social Hover Plugin

WordPress Plugin – Easy Social Hover allows users to add multiple on hover effects with Social Network Sharing buttons to their images using standard WP media tool. Add Facebook Share, Twitter, Pinterest, LinkedIn and GooglePlus sharing to your Images with a Style! This plugin will enable your visitors to easily and simply share your images over major social networks!

jQuery-Hover-CSS-Hover-Effects-011

Hover and Click Trigger for Circular Elements with jQuery

Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

Free jQuery CSS3 Image Hover Effects

Social Image Hover for jQuery

Social Image Hover for jQuery combines all of the web’s most popular social services into one easy to use plugin. Social Image Hover allows you to quickly and easily add hover-over social buttons to your images on-the-fly making them instantly “shareable” on Pinterest, Facebook, Twitter, Google Plus, Reddit, and more. Even better, the hover effects are silky smooth, cross browser, and come in multiple styles!

Free jQuery CSS3 Image Hover Effects

CSS3 Lightbox

Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.

jQuery-Hover-CSS-Hover-Effects-036

IHC – Portfolio CSS3 Image Hover Caption

The CSS3 is amazing. This item contain a CSS3 portfolio styling with 15 animation types. No javascript, no image sprites. The source code is well commented and very easy to edit and understand.

jQuery-Hover-CSS-Hover-Effects-012

Thumbnail Proximity Effect with jQuery and CSS3

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

jQuery-Hover-CSS-Hover-Effects-037

Anyhover Image Effects

WordPress Plugin – Anyhover Image Effects allows user to add multiple on hover effects to their images using standard WP media tool. This plugin has got 4 starting effects and 16 hover effects so in combination this plugin delivers users 64 cool effects for their images!

jQuery-Hover-CSS-Hover-Effects-013

Responsive Pricing Table with Neat Hover States

Anyone else getting a text squishing/snapping effect upon mouse hover? It seems unintentional.

jQuery-Hover-CSS-Hover-Effects-038

HoverEx – jQuery image hover animation plugin

HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.You can use it to create unique animated effects effortlessly without any knowledge of jQuery. Just make the needs html markup,it will word well for you.

jQuery-Hover-CSS-Hover-Effects-014

Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

jQuery-Hover-CSS-Hover-Effects-039

ThumbFx – Responsive jQuery Thumbnail Effects

Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops. Check out how awesome it is.

jQuery-Hover-CSS-Hover-Effects-015

Pure CSS3 Vertical menu with nice hover effect

Vertical menu used font icon and nice hover effect. Thanks CSS3

jQuery-Hover-CSS-Hover-Effects-040

WP ThumbFx – Responsive jQuery Thumbnail Effects

Enrich your website experience with WPThumbFx, a WordPress jQuery animation plugin that brings your images and content in your articles to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.

jQuery-Hover-CSS-Hover-Effects-016

Direction-Aware Hover Effect with CSS3 and jQuery

In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we “leave” the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.

jQuery-Hover-CSS-Hover-Effects-041

Zoome – jQuery Image Zoom Effect Plugin

Zoome is a jQuery plugin to help you zoom images with hover effect(grayscale,blur,transparent) and you can zoom-in or zoom-out use mousewheel.

jQuery-Hover-CSS-Hover-Effects-017

Circle Hover Effects with CSS Transitions

In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!

jQuery-Hover-CSS-Hover-Effects-042

HoverUp – jQuery Plugin

HoverUp is a flexible, yet very lightweight, jQuery Plugin to easily add animated captions to pictures or other content.

jQuery-Hover-CSS-Hover-Effects-018

CSS3 Image – Text Hover Effects

8 Standard Background Animations. Multiple Background Animation in 1 Hover. More than 15 Background Combinations. 14 Text Effects. 2 Background colors. (Light and Dark).

jQuery-Hover-CSS-Hover-Effects-043

jFade – jQuery Hover Effect

jFade is a jQuery plugin that allows you to easily add fade interaction to elements on your website! Adds a nice UI hover effect using nothing more than the images already on your page. With less than a dozen extra lines of code, you can easily control opacity fades when users hover over images.

jQuery-Hover-CSS-Hover-Effects-019

Hexagons with Hover Effect

This is the demo for my blog post about how I build the image hexagons + hover effects on my new website.

jQuery-Hover-CSS-Hover-Effects-044

Neat Photo Hover Effect with CSS Sprites and jQuery

Here is a very nice effect for photos or some black and white images. We are using some CSS sprites for the photos to create a darken effect when hovering over the images. This could also be used with other effects. The basic principle is to create the impression

jQuery-Hover-CSS-Hover-Effects-020

Pretty Hover Effects with CSS and jQuery

This article will show you how to create pretty hover effects for your images using jQuery and CSS. The plan is to use a clean mark up, adding the necessary elements on the fly. What this means is that we are starting from barebones image HTML tags, with title attributes only. This can come useful especially if you already have hundreds of images that you want to apply this effect on.

jQuery-Hover-CSS-Hover-Effects-045

Photo Booth Strips with Lightbox

A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly.

jQuery-Hover-CSS-Hover-Effects-021

Magnifying glass for image zoom using Jquery and CSS3

Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action. The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.

jQuery-Hover-CSS-Hover-Effects-046

Putting CSS Clip to Work: Expanding Overlay Effect

A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.

jQuery-Hover-CSS-Hover-Effects-001

Bounce Effect

Simple bounce effect made with css3 keyframe animation

jQuery-Hover-CSS-Hover-Effects-047

Mate Hover – jQuery Plugin

Mate Hover – is a jQuery plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.

jQuery-Hover-CSS-Hover-Effects-022

Fast pseudo-perspective on hover

This is an effect from bighuman.com — but sped up by eliminating some “transition:” CSS which was glitching up the browser with javascript’s quick updates.

jQuery-Hover-CSS-Hover-Effects-048

Image & Thumbnail Hover Slider

I’d like to introduce you my brand new script here! Image & Thumbail Hover Slider is nice and smooth, clean and scalable – you gonna love it!

jQuery-Hover-CSS-Hover-Effects-023

Responsive Hover Descriptions

A test of different styles that can be applied to scalable product images to show the product’s information.

jQuery-Hover-CSS-Hover-Effects-049

Plus Thumbnail Post Widget – Premium Plugin

Display how you love to see your latest post, there are 5 different types (the most used). Show indicates the types of post you want to use between them are the options: Most Popular (most commented), Last Post, The most viewed.

jQuery-Hover-CSS-Hover-Effects-024

Rift.js

Took a few minutes today to write up a little plugin for all your caption-revealing needs. I’d be honored for you to use it, just let me know what you made!

jQuery-Hover-CSS-Hover-Effects-050

Social Image Hover for WordPress

Social Image Hover for WordPress combines all of the web’s most popular social services into one easy to use plugin. Social Image Hover allows you to quickly and easily add hover-over social buttons to your images on-the-fly making them instantly “shareable” on Pinterest, Facebook, Twitter, and Google Plus. Even better, the hover effects are silky smooth, cross browser, and come with multiple overlay images!

jQuery-Hover-CSS-Hover-Effects-026

Awesome jQuery image Swish Zoom Hover Effect

With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes). You can also adjust all the settings it comes with (refer to usage in the index.html header). It’s really simple to setup, if you get into any trouble with it do let me know and I’ll do my best to help you out.

jQuery-Hover-CSS-Hover-Effects-051

ImageLens – A jQuery plug-in for Lens Effect Image Zooming

was searching a good jQuery plug-in for image zooming but couldn’t find any which was matching my criteria. I need the lens effect while zooming images and it should work without much plumbing. So, I decided to create one and now sharing this with everyone.

jQuery-Hover-CSS-Hover-Effects-052

Adaptive Thumbnail Pile Effect with Automatic Grouping

An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.

jQuery-Hover-CSS-Hover-Effects-053

Posted by 홍반장水 홍반장水
TAG CSS3, hover, jQuery
http://www.layoutit.com/

 

LayoutIt! is NOT a site builder. It's the kick-off for every frontend project you need to develop.

LayoutIt! takes every element and component of Bootstrap to make your frontend coding easier without needing to be
an expert in javascript, html5 or css3. You just build what you need to start, and then code it however you most like!

 

LayoutIt! - Drag & Drop Interface Builder for Bootstrap

 

 

 

 

 

 

 

Posted by 홍반장水 홍반장水
TAG CSS3, html5, layout

[CSS] css 참고 사이트.   transform, transition, Animation

 

CSS3 transform:skew
CSS3 transform:rotate
CSS3 transform-origin

 

transform
transition
animation

 

http://tcbs17.cafe24.com/tc/html5/css_/css_demo2/index.html


SVG : Scalable Vector Graphics

 

CSS 참고 사이트
http://htmlcss.kr/
http://w3schools.com/
http://css3generator.com/
http://caniuse.com/

Posted by 홍반장水 홍반장水
TAG css, CSS3

 

17 Best CSS Tools to Speed Up Your Coding

 

http://codegeekz.com/best-css-tools-to-speed-up-your-coding/

 

CSS doesn’t need any introduction as it is one of the most popular language amongst developers. Learning and working with CSS is no more an arduous task as there are many informative tutorials and CSS tools are available over Internet. Such tools would lead you to create useful and innovative web applications and spare the development process and time.

In this article I have gathered 17 Best CSS Tools to speed up your coding; following tools will assist and simplify the work of developers and designers. With the following tools you can generate CSS menus, animated images, buttons, sliders, text animation, CSS form codes, layers and many more. Hope you find the list handy and useful for your development needs.

1. Topcoat : CSS for Clean and Fast Web Apps

topcoat
Topcoat is a library which consists CSS classes for form elements, buttons, checkboxes, sliders and many more. It is a lightweight tool that would make your website or app look awesome in short period of time.

Website

2. PCSS : Shortcut Oriented Server Side CSS3 Preprocessor

pcss
PCSS is a PHP-driven CSS Preprocessor, which aids developer to write CSS code quickly by defining variables, class nesting, default unit and server-side browser specifics. PCSS do server-side processing using PHP 5, so it requires this version to be available on the server where the website is running.

Website

3. Skelton

skelton
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles: responsive grid down to mobile, fast to start and style agnostic.

Website

4. CSS Menu Maker

css-menu-maker
This tool helps users to create custom CSS drop down menu easily. CSS Menu Maker provides webmaster with tools to create custom, cross browser compatible css menus also it provides source code for all CSS Menus and facilities users to download and tweak the code.

Website

5. Sencha Animator

sencha
It is a desktop application which enables users to create CSS3 animations for touch screen mobile devices and webkit browsers. Sencha Animator helps users to create animated text, images, design buttons with gradients and embed analytics.

Website

6. CSS Form Code Generator

css-form-generator
CSS Form Code maker creates nice looking layouts for forms. It also helps you to crate colorful table less layout for forms. This ‘code maker’ generates CSS layout code to ‘spice up’ those forms as well.

Website

7. PrefixmyCSS

prefixmycss
PrefixMyCss lets you prefix your CSS3 code easily. Users have to paste CSS code in to the window to prefix, all vendor prefixes are added to your code, users can safely replace their old code.

Website

8. Sky CSS Tool

sky-css-tool
Sky CSS Tool allows you to create CSS classes almost without using manuscript code. Users would need JavaScript compatible browser for the proper functioning.

Website

9. Spritemapper

Spritemapper
Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices. This tool helps developers to optimize available space and the loading time.

Website

10. CSS Compressor

css_drive
CSS Compressor compresses your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Website

11. Patternify

Patternify
It helps you to generate beautiful CSS patterns.

Website

12. CSS Text Shadow

Css Text Shadow
CSS Text Shadow allows you to generate beautiful text shadows.

Website

13. CSS3 Pie

CSS3-PIE
Pie makes internet explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Website

14. The Web Font Combinator

font-combinator
This tool has been built to allow previewing of font combinations in a fast, browser-based manner. There have been numerous printed books through the years that allowed a designer to put a headline font next to a body font, and this is an attempt to recreate that for the web.

Website

15. 3D Transforms

3d transform
CSS 3D Transforms is online tool which enables users to perform various level Transforms. This tool is on experimental mode and require specify prefixes in all browsers.

Website

16. Quick Form Builder

accessify
Quick Form Builder allows you to easily create CSS forms.

Website

17. Layer Styles

layerstyles
It is a HTML5 app for creating CSS3 in an intuitive way. It has Colorpicker which lets you pick any color of the element you’re working on, it facilitates users with Drag and Drop images on to the page to use them as background or to pick their colors.

Website

Posted by 홍반장水 홍반장水

least.js

Random & Responsive HTML 5, CSS3 Gallery with LazyLoad

 

http://kamilczujowski.github.io/least/

 

Least.js creates random and responsive HTML5 and CSS3 image galleries that include Lazyload. Installation and usage is simple, and the end result is quite beautiful.

Least.js

Posted by 홍반장水 홍반장水

더 나은 웹 사이트를 만드는 데 도움을 줄 수있는 25 웹 개발 자원

25 Web development resources to help you create better websites

 

http://www.developerdrive.com/2013/03/25-web-development-resources-to-help-you-create-better-websites/

 

 

25 Web development resources to help you create better websites

#1. Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

#2. Initializr

Initializr is here to kick-start the development of your new projects. It generates templates based on HTML5 Boilerplate by allowing you to choose which parts you want or don’t want from it. A responsive template has also been added to start from a basic design instead of a blank page.

#3. Button CSS3 UI

This new CSS3 Framework buttons is perfect for your websites, blogs and web projects.
It’s now possible to integrate custom buttons easy to use and understand.

#4. Bootstrap v.2.0 from Twitter

A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

#5. Normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

#6. Adobe Edge Free Web Fonts

Edge Web Fonts gives you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. The fonts are served by Typekit, so you can be sure of high performance and stability. Plus, it’s free!

#7. dabblet – A Playground for Testing CSS and HTML

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.

#8. CSS3 Shapes

CSS3 Shapes provide a list of mainly geometric shapes you can perform using CSS3. Whether you need a circle, triangle or some other shape I am sure you will find something useful here.

#9. Mobile Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

#10. CSS3 Patterns Gallery

CSS3 Patterns Gallery offers exactly what the title says, a large selection of CSS3 patterns. On the front page you will see all the different patterns, then when you click on one it will give you the code needed to recreate this pattern on your site.

#11. Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.

#12. The Semantic Grid System

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive? Runs on LESS, SCSS, or Stylus.

#13. Moqups – HTML5 App For Creating Wireframes

Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them. If you ever wanted to create a wireframe of a website then this is the program that will help you do exactly that.

#14. Sencha CSS3 Animator & HTML5 Animations

Captivate your audience. Engage your customers. Standards-based CSS3 animation has never been so easy. With the power of Sencha Animator, use CSS3 animations to build the next generation rich-media ads. Animate text and images with smooth transitions, design buttons with gradients, and embed analytics. All backed by the strength of web standards. It does cost $99 but it is really worth it.

#15. Css2Less – CSS to LessCSS converter

This tool has been thought for front-end developers who are tired of working with CSS. Here you can quickly convert your old CSS files to fresh new LESS files. As easy as copy/paste. You can also convert files locally by install the css2less RubyGems.

#16. prefixMyCSS

You can now use powerful CSS3 techniques, and don’t waste your time writing each properties. First, write your code for your loved browser. Then, come here, paste your CSS code in the first block, and prefix! All vendor prefixes are added to your code. You can safely replace your old code.

#17. RWD Grid

rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).rwdgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens.

#18. Foundation

The most advanced responsive front-end framework in the world. Foundation is made by ZURB, a product design company in Campbell, California. They have more than 15 years of experience building web products, services and websites into this framework.

Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that’ll get you up and running in no time.

#19. CSS Lint

CSS Lint helps point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

#20. Buzz

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It degrades silently on non-modern browsers.

#21. HTML Email Boilerplate

This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc

#22. Mozilla Thimble

Thimble makes it ridiculously simple to create your own web pages. Write and edit HTML and CSS right in your browser. Instantly preview your work. Then host and share your finished pages with a single click. Easy, huh?

#23. Fluid Baseline Grid

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites.

#24. Sprite Cow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually. However, copying all the positions & sizes from graphics apps wasted a ton of my time, so the guys behind Sprite Cow made this!

#25. holmes.css

holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website. It has a simple implementation and a mostly unobtrusive effect on your page. Not recommended for live enviroments.

Posted by 홍반장水 홍반장水

Making Custom CSS3 Video Players With HTML5 and Javascript

 

Additional Resources

Download      Demo

 

 

 

Posted by 홍반장水 홍반장水