Fullscreen Slit Slider with jQuery and CSS3 | Codrops
A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide.
Multi-Level Push Menu | Codrops
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, somethin
Google Nexus Website Menu | Codrops
A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website. Today I want to show you how to reconstruct the sidebar menu of the Google Nexus 7 page. It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar me
Responsive Icon Grid | Codrops
A responsive grid of anchors with icons, text and some example hover transitions. A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover. The HTML <ul class="cbp-ig-grid"> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-shoe"></span> <h3 class="cbp-ig-title">Sq
Nifty Modal Window Effects
This is a modal window. You can do the following things with it: Read: modal windows will probably tell you something important so don't forget to read what they say. Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence. Close: click on the button below to close the modal. Close me! This is a modal window. You can do the following things with it: Rea
Expanding Search Bar Deconstructed | Codrops
A tutorial on how to create a mobile-friendly and responsive expanding search bar. Maybe you have noticed the little adjustments that we did to our theme lately here on Codrops. One of the things we thought might be nice to change is the search input. We’ve put it from the sidebar into the header and we use a common effect where you have to click to expand the input. We have received many requests
Creative Button Styles | Codrops
Some creative and modern button styles and effects for your inspiration. Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of Ja
Caption Hover Effects | Codrops
A tutorial on how to create some subtle and modern caption hover effects. Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects
Slit Slider Revised | Codrops
Slit Slider is a slideshow with a twist: when navigating the slides, the current one will be “cut open” into two slices and moved away, revealing the next or previous slide. The slider can be used in a responsive context and it has been updated and improved. We have updated the Slit Slider tutorial, fixed some issues and made the slider responsive. Check out the original tutorial to find out more
Basic Ready-to-Use CSS Styles | Codrops
This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements. Today we are going to dig a little bit more into process development. When you’re creating a website or an application from scratch, you may need a collection of patterns helping you buildi
Fullscreen Video Slideshow with BigVideo.js | Codrops
A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video. (Please note that the ZIP file does not contain any video files due to their size.) BigVideo.js is a jQuery plugin that makes it easy to create fit-to-fill background video on a web page. It can play silent ambient background video (or series of videos), or used
Creative Web Typography Styles | Codrops
Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js. With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will a
Animated Responsive Image Grid | Codrops
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions. Today we want to share a jQuery plugin for creating a responsive image grid with you. The idea is to have a list of images and define th
Rotating Words with CSS Animations | Codrops
Using CSS Animations we will change or rotate some parts of a sentence. In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let’s start
Animated Content Tabs with CSS3 | Codrops
In this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators. Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseud
Direction-Aware Hover Effect with CSS3 and jQuery | Codrops
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse. 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
Responsive Horizontal Layout | Codrops
In this tutorial we’ll create a horizontal website layout with individually scrollable content panels. We’ll change the layout for smaller screens, making it responsive. Today we want to show you how to create a horizontal layout with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
View Mode Switch | Codrops
https://tympanus.net/codrops/wp-content/uploads/2012/09/3D-Restaurant-Menu-Concept.jpg
https://tympanus.net/codrops/wp-content/uploads/2012/08/CircleHoverEffects.jpg
