Documents
- Title
- Animate.css
- Description
- Animate.css is a style-sheet collection of animation effects.
- Category
- Animation
- Library
Animate.css
- Include Files
<!-- Add Animate.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css"> <!-- Add jQuery --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
- Basic markup
<!-- Animate.css adds an animation class name to the class and uses it. To repeat playback, add "infinite" to the class. --> <a href="#" class="animated infinite {animation-class-name}">Example</a>
- Attachment Table
Animate.css Class Name
Attention Seekers bounce flash pulse rubberBand shake headShake swing tada wobble jello Bouncing Entrances bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp Bouncing Exits bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp Fading Entrances fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig Fading Exits fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig Flippers flipInX flipInY flipOutX flipOutY Lightspeed lightSpeedIn lightSpeedOut Rotating Entrances rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight Rotating Exits rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight Sliding Entrances slideInUp slideInDown slideInLeft slideInRight Sliding Exits slideOutUp slideOutDown slideOutLeft slideOutRight Zoom Entrances zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp Zoom Exits zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp Specials hinge jackInTheBox rollIn rollOut
- Related
Source Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<!-- Add jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<title>Animate.css</title>
<style>
.button{
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 170px;
margin: 5px;
padding: 15px 0;
transition: all .5s;
text-decoration: none;
color: #fff;
border: none;
border-radius: 5px;
background-color: hsl(174, 100%, 29%);
}
.button:hover{
background-color: hsl(174, 100%, 35%);
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">Animate.css</h1>
<p class="dlw-description">Animate.css is a style-sheet collection of animation effects.</p>
</header>
<!-- In order to check the effect of Animate.css, click event is set with jQuery. -->
<script>
$(function () {
$('.button').on('click', function () {
// Click to get the class name of the data attribute and add it to the button.
var animation = 'animated' + ' ' + $(this).data('animate');
$(this).addClass(animation);
// Click 2 seconds back to restore.
$(this).delay(2000).queue(function(){
$(this).removeAttr('class').addClass('button');
});
return false;
});
});
</script>
<section>
<h2 class="dlw-subtitle">[1] Attention Seekers</h2>
<p>Click on the button to play.</p>
<!-- bounce: Add Class "animated bounce" -->
<a href="#" class="button" data-animate="bounce">bounce</a>
<!-- flash: Add Class "animated flash" -->
<a href="#" class="button" data-animate="flash">flash</a>
<!-- pulse: Add Class "animated pulse" -->
<a href="#" class="button" data-animate="pulse">pulse</a>
<!-- rubberBand: Add Class "animated rubberBand" -->
<a href="#" class="button" data-animate="rubberBand">rubberBand</a>
<!-- shake: Add Class "animated shake" -->
<a href="#" class="button" data-animate="shake">shake</a>
<!-- headShake: Add Class "animated headShake" -->
<a href="#" class="button" data-animate="headShake">headShake</a>
<!-- swing: Add Class "animated swing" -->
<a href="#" class="button" data-animate="swing">swing</a>
<!-- tada: Add Class "animated tada" -->
<a href="#" class="button" data-animate="tada">tada</a>
<!-- wobble: Add Class "animated wobble" -->
<a href="#" class="button" data-animate="wobble">wobble</a>
<!-- jello: Add Class "animated jello" -->
<a href="#" class="button" data-animate="jello">jello</a>
</section>
<section>
<h2 class="dlw-subtitle">[2] Bouncing Entrances</h2>
<p>Click on the button to play.</p>
<!-- bounceIn: Add Class "animated bounceIn" -->
<a href="#" class="button" data-animate="bounceIn">bounceIn</a>
<!-- bounceInDown: Add Class "animated bounceInDown" -->
<a href="#" class="button" data-animate="bounceInDown">bounceInDown</a>
<!-- bounceInLeft: Add Class "animated bounceInLeft" -->
<a href="#" class="button" data-animate="bounceInLeft">bounceInLeft</a>
<!-- bounceInRight: Add Class "animated bounceInRight" -->
<a href="#" class="button" data-animate="bounceInRight">bounceInRight</a>
<!-- bounceInUp: Add Class "animated bounceInUp" -->
<a href="#" class="button" data-animate="bounceInUp">bounceInUp</a>
</section>
<section>
<h2 class="dlw-subtitle">[3] Bouncing Exits</h2>
<p>Click on the button to play.</p>
<!-- bounceOut: Add Class "animated bounceOut" -->
<a href="#" class="button" data-animate="bounceOut">bounceOut</a>
<!-- bounceOutDown: Add Class "animated bounceOutDown" -->
<a href="#" class="button" data-animate="bounceOutDown">bounceOutDown</a>
<!-- bounceOutLeft: Add Class "animated bounceOutLeft" -->
<a href="#" class="button" data-animate="bounceOutLeft">bounceOutLeft</a>
<!-- bounceOutRight: Add Class "animated bounceOutRight" -->
<a href="#" class="button" data-animate="bounceOutRight">bounceOutRight</a>
<!-- bounceOutUp: Add Class "animated bounceOutUp" -->
<a href="#" class="button" data-animate="bounceOutUp">bounceOutUp</a>
</section>
<section>
<h2 class="dlw-subtitle">[4] Fading Entrances</h2>
<p>Click on the button to play.</p>
<!-- fadeIn: Add Class "animated fadeIn" -->
<a href="#" class="button" data-animate="fadeIn">fadeIn</a>
<!-- fadeInDown: Add Class "animated fadeInDown" -->
<a href="#" class="button" data-animate="fadeInDown">fadeInDown</a>
<!-- fadeInDownBig: Add Class "animated fadeInDownBig" -->
<a href="#" class="button" data-animate="fadeInDownBig">fadeInDownBig</a>
<!-- fadeInLeft: Add Class "animated fadeInLeft" -->
<a href="#" class="button" data-animate="fadeInLeft">fadeInLeft</a>
<!-- fadeInLeftBig: Add Class "animated fadeInLeftBig" -->
<a href="#" class="button" data-animate="fadeInLeftBig">fadeInLeftBig</a>
<!-- fadeInRight: Add Class "animated fadeInRight" -->
<a href="#" class="button" data-animate="fadeInRight">fadeInRight</a>
<!-- fadeInRightBig: Add Class "animated fadeInRightBig" -->
<a href="#" class="button" data-animate="fadeInRightBig">fadeInRightBig</a>
<!-- fadeInUp: Add Class "animated fadeInUp" -->
<a href="#" class="button" data-animate="fadeInUp">fadeInUp</a>
<!-- fadeInUpBig: Add Class "animated fadeInUpBig" -->
<a href="#" class="button" data-animate="fadeInUpBig">fadeInUpBig</a>
</section>
<section>
<h2 class="dlw-subtitle">[5] Fading Exits</h2>
<p>Click on the button to play.</p>
<!-- fadeOut: Add Class "animated fadeOut" -->
<a href="#" class="button" data-animate="fadeOut">fadeOut</a>
<!-- fadeOutDown: Add Class "animated fadeOutDown" -->
<a href="#" class="button" data-animate="fadeOutDown">fadeOutDown</a>
<!-- fadeOutDownBig: Add Class "animated fadeOutDownBig" -->
<a href="#" class="button" data-animate="fadeOutDownBig">fadeOutDownBig</a>
<!-- fadeOutLeft: Add Class "animated fadeOutLeft" -->
<a href="#" class="button" data-animate="fadeOutLeft">fadeOutLeft</a>
<!-- fadeOutLeftBig: Add Class "animated fadeOutLeftBig" -->
<a href="#" class="button" data-animate="fadeOutLeftBig">fadeOutLeftBig</a>
<!-- fadeOutRight: Add Class "animated fadeOutRight" -->
<a href="#" class="button" data-animate="fadeOutRight">fadeOutRight</a>
<!-- fadeOutRightBig: Add Class "animated fadeOutRightBig" -->
<a href="#" class="button" data-animate="fadeOutRightBig">fadeOutRightBig</a>
<!-- fadeOutUp: Add Class "animated fadeOutUp" -->
<a href="#" class="button" data-animate="fadeOutUp">fadeOutUp</a>
<!-- fadeOutUpBig: Add Class "animated fadeOutUpBig" -->
<a href="#" class="button" data-animate="fadeOutUpBig">fadeOutUpBig</a>
</section>
<section>
<h2 class="dlw-subtitle">[6] Flippers</h2>
<p>Click on the button to play.</p>
<!-- flipInX: Add Class "animated flipInX" -->
<a href="#" class="button" data-animate="flipInX">flipInX</a>
<!-- flipInY: Add Class "animated flipInY" -->
<a href="#" class="button" data-animate="flipInY">flipInY</a>
<!-- flipOutX: Add Class "animated flipOutX" -->
<a href="#" class="button" data-animate="flipOutX">flipOutX</a>
<!-- flipOutY: Add Class "animated flipOutY" -->
<a href="#" class="button" data-animate="flipOutY">flipOutY</a>
</section>
<section>
<h2 class="dlw-subtitle">[7] Lightspeed</h2>
<p>Click on the button to play.</p>
<!-- lightSpeedIn: Add Class "animated lightSpeedIn" -->
<a href="#" class="button" data-animate="lightSpeedIn">lightSpeedIn</a>
<!-- lightSpeedOut: Add Class "animated lightSpeedOut" -->
<a href="#" class="button" data-animate="lightSpeedOut">lightSpeedOut</a>
</section>
<section>
<h2 class="dlw-subtitle">[8] Rotating Entrances</h2>
<p>Click on the button to play.</p>
<!-- rotateIn: Add Class "animated rotateIn" -->
<a href="#" class="button" data-animate="rotateIn">rotateIn</a>
<!-- rotateInDownLeft: Add Class "animated rotateInDownLeft" -->
<a href="#" class="button" data-animate="rotateInDownLeft">rotateInDownLeft</a>
<!-- rotateInDownRight: Add Class "animated rotateInDownRight" -->
<a href="#" class="button" data-animate="rotateInDownRight">rotateInDownRight</a>
<!-- rotateInUpLeft: Add Class "animated rotateInUpLeft" -->
<a href="#" class="button" data-animate="rotateInUpLeft">rotateInUpLeft</a>
<!-- rotateInUpRight: Add Class "animated rotateInUpRight" -->
<a href="#" class="button" data-animate="rotateInUpRight">rotateInUpRight</a>
</section>
<section>
<h2 class="dlw-subtitle">[9] Rotating Exits</h2>
<p>Click on the button to play.</p>
<!-- rotateOut: Add Class "animated rotateOut" -->
<a href="#" class="button" data-animate="rotateOut">rotateOut</a>
<!-- rotateOutDownLeft: Add Class "animated rotateOutDownLeft" -->
<a href="#" class="button" data-animate="rotateOutDownLeft">rotateOutDownLeft</a>
<!-- rotateOutDownRight: Add Class "animated rotateOutDownRight" -->
<a href="#" class="button" data-animate="rotateOutDownRight">rotateOutDownRight</a>
<!-- rotateOutUpLeft: Add Class "animated rotateOutUpLeft" -->
<a href="#" class="button" data-animate="rotateOutUpLeft">rotateOutUpLeft</a>
<!-- rotateOutUpRight: Add Class "animated rotateOutUpRight" -->
<a href="#" class="button" data-animate="rotateOutUpRight">rotateOutUpRight</a>
</section>
<section>
<h2 class="dlw-subtitle">[10] Sliding Entrances</h2>
<p>Click on the button to play.</p>
<!-- slideInUp: Add Class "animated slideInUp" -->
<a href="#" class="button" data-animate="slideInUp">slideInUp</a>
<!-- slideInDown: Add Class "animated slideInDown" -->
<a href="#" class="button" data-animate="slideInDown">slideInDown</a>
<!-- slideInLeft: Add Class "animated slideInLeft" -->
<a href="#" class="button" data-animate="slideInLeft">slideInLeft</a>
<!-- slideInRight: Add Class "animated slideInRight" -->
<a href="#" class="button" data-animate="slideInRight">slideInRight</a>
</section>
<section>
<h2 class="dlw-subtitle">[11] Sliding Exits</h2>
<p>Click on the button to play.</p>
<!-- slideOutUp: Add Class "animated slideOutUp" -->
<a href="#" class="button" data-animate="slideOutUp">slideOutUp</a>
<!-- slideOutDown: Add Class "animated slideOutDown" -->
<a href="#" class="button" data-animate="slideOutDown">slideOutDown</a>
<!-- slideOutLeft: Add Class "animated slideOutLeft" -->
<a href="#" class="button" data-animate="slideOutLeft">slideOutLeft</a>
<!-- slideOutRight: Add Class "animated slideOutRight" -->
<a href="#" class="button" data-animate="slideOutRight">slideOutRight</a>
</section>
<section>
<h2 class="dlw-subtitle">[12] Zoom Entrances</h2>
<p>Click on the button to play.</p>
<!-- zoomIn: Add Class "animated zoomIn" -->
<a href="#" class="button" data-animate="zoomIn">zoomIn</a>
<!-- zoomInDown: Add Class "animated zoomInDown" -->
<a href="#" class="button" data-animate="zoomInDown">zoomInDown</a>
<!-- zoomInLeft: Add Class "animated zoomInLeft" -->
<a href="#" class="button" data-animate="zoomInLeft">zoomInLeft</a>
<!-- zoomInRight: Add Class "animated zoomInRight" -->
<a href="#" class="button" data-animate="zoomInRight">zoomInRight</a>
<!-- zoomInUp: Add Class "animated zoomInUp" -->
<a href="#" class="button" data-animate="zoomInUp">zoomInUp</a>
</section>
<section>
<h2 class="dlw-subtitle">[13] Zoom Exits</h2>
<p>Click on the button to play.</p>
<!-- zoomOut: Add Class "animated zoomOut" -->
<a href="#" class="button" data-animate="zoomOut">zoomOut</a>
<!-- zoomOutDown: Add Class "animated zoomOutDown" -->
<a href="#" class="button" data-animate="zoomOutDown">zoomOutDown</a>
<!-- zoomOutLeft: Add Class "animated zoomOutLeft" -->
<a href="#" class="button" data-animate="zoomOutLeft">zoomOutLeft</a>
<!-- zoomOutRight: Add Class "animated zoomOutRight" -->
<a href="#" class="button" data-animate="zoomOutRight">zoomOutRight</a>
<!-- zoomOutUp: Add Class "animated zoomOutUp" -->
<a href="#" class="button" data-animate="zoomOutUp">zoomOutUp</a>
</section>
<section>
<h2 class="dlw-subtitle">[14] Specials</h2>
<p>Click on the button to play.</p>
<!-- hinge: Add Class "animated hinge" -->
<a href="#" class="button" data-animate="hinge">hinge</a>
<!-- jackInTheBox: Add Class "animated jackInTheBox" -->
<a href="#" class="button" data-animate="jackInTheBox">jackInTheBox</a>
<!-- rollIn: Add Class "animated rollIn" -->
<a href="#" class="button" data-animate="rollIn">rollIn</a>
<!-- rollOut: Add Class "animated rollOut" -->
<a href="#" class="button" data-animate="rollOut">rollOut</a>
</section>
</body>
</html>Comment
Search
- Style Design
- Text Style DesignCSS
Here, design samples of various effects to text are posted.
- Headline (Heading) Style DesignCSS
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted. - OL (Ordered List) Style DesignCSS
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted. - HR (Separator Line) Style DesignCSS
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted. - Box Shadow Style DesignCSS
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.
- Layout
- How to specify a breakpoint and switch imagesJS
Using
<picture> andsrcset , it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE. - Grid LayoutCSS
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted. - FlexCSS
Flex is the value of the CSS display property.
- Link & Button
- Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.
- Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.
- Button.cssCSS
Button.css is collection of CSS3 button animations.
- Card
- Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
- Text
- Arctext.jsjQuery
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
- Lettering.jsjQuery
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
- Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
- FitText.jsjQuery
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.
- Media
- FeedEkjQuery
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
- YouTube Embed
Introduction of various embedment methods of YouTube.
- FitVids.jsjQuery
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
- xZoomjQuery
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom. - Instagram.cssCSS
Instagram.css is a stylesheet set that filters photos like instagram.
- Date
- Moment.jsJS
Moment.js is a javascript that processes and displays date and time.
- Bootstrap Material DatePickerjQuery
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
- Table
- MultifilterjQuery
Multifilter is jQuery Table Filtering Plugin.
- Flex TableCSS
Responsive table using "display: flex;".
Not supported for rowspan. - Grid TableCSS
Responsive table using "display: grid;".
Not supported for rowspan. - Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.
- Form
- jQuery Mask PluginjQuery
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
- Select2 #1. Basic SettingjQuery
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2. - jQuery SearcherjQuery
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
- Slider
- Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.
- FlexSlider #1. Single SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted. - FlexSlider #2. Carousel SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted. - slick #1. Single SliderjQuery
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted. - slick #2. Carousel SliderjQuery
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
- Lightbox
- fancyBox #1. basic image lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted. - fancyBox #2. media lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted. - Magnific Popup #1. basic image lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted. - Magnific Popup #2. media lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted. - Magnific Popup #3. CSS3-based animation effectsjQuery
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
- Navigation
- animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
- GreedyNavjQuery
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
- GridTabjQuery
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
- jQuery.NiceScrolljQuery
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
- metisMenujQuery
metisMenu is a jQuery plugin that expands vertical and vertical menus.
- fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted. - fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed.. - Offside.js #1. Basic Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands. - Offside.js #2. Multiple Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases. - Filterizr #1. Basic FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options. - Filterizr #2. Advanced FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.
- Animation
- animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
- Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
- ScrollajQuery
Scrolla is jQuery scroll animation plugin.
- Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.
- Animate.cssCSS
Animate.css is a style-sheet collection of animation effects.
- jQuery Easing PluginjQuery
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
- Background
- fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted. - fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed.. - jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayer is jQuery Background player plugin.
- Modal / Tooltip
- Hint.cssCSS
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name. - ProtipjQuery
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
- Social
- Framework
- Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.
- Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
- Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.
- Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.
- Cheat Sheet
- HTML5 Cheat Sheet
HTML5 Cheat Sheet by Make A Website Hub
- CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine
- Visual Studio Code Keyboard Shortcuts
This is the Visual Studio Code default keyboard shortcut list.
- GreenSock Cheat Sheet
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
- Other
- Google Search
On this page you can search for codes collectively.
- Design News
It is a news feed about design.