Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG) | Codrops
Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG) A set of really nice and modern animated GIF preloaders by PixelBuddha. The colorful set comes with seven unique square style activity indicators in three sizes and the Adobe After Effects file. Today we are really happy to share a set of creative activity indicators by PixelBuddha with you! You may have seen the first set of the Flat Preloade
Google Grid Gallery | Codrops
A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google. This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media qu
Transitions for Off-Canvas Navigations | Codrops
Some inspiration for transition effects for off-canvas navigations. Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the side
On Scroll Effect Layout | Codrops
An on scroll effect template that animates the sides of sections once they are in the viewport. This Blueprint is a template for a on scroll effect layout. We’ve had some requests on how to achieve this effect of animating elements once they are in the viewport and decided to create a Blueprint for it. It works with adding a class for animating the two sides of a section. There is an example effec
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
Responsive Retina-Ready Menu | Codrops
A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimize
A Collection of Page Transitions | Codrops
A showcase collection of various page transition effects using CSS animations. Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspecti
Fullscreen Pageflip Layout | Codrops
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to c
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.
Basic Ready-to-Use CSS Styles
.drop-shadow.top { box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4); } .drop-shadow.right { box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); } .drop-shadow.bottom { box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); } .drop-shadow.left { box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4); }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーエフェクト Creative Link Effects