Hero Slideshow | CodyHouse
Hero slider A simple, responsive slideshow in CSS & JavaScript. Article & Download Slide title here Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus! Start Learn More Slide title here Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus! Start Learn More Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam q
CSS Contact Form | CodyHouse
We have been receiving lots of requests about adding a contact form to our library. Here it is! A minimal and customizable snippet to throw a semantic form into your web projects on the fly. There are some optional features (i.e. floating labels) that can be easily removed in case you want the form to be simpler. We included all common form elements like radio buttons, checkboxes, select, error me
CSS Content Filter | CodyHouse
Content Filter A slide-in filter panel powered by CSS and jQuery. A well-designed filter is a powerful tool users can take advantage of. It is actually an essential feature if your website has lots of content, distributed across different categories. For an e-commerce, it is a way to increase conversion rates by reducing the time needed by the user to find what he's looking for. Building this kind
Expandable Project Presentation in CSS and jQuery | CodyHouse
Expandable Project Presentation A gallery of project preview images that expand on click to reveal the full case study. The real power of CSS Transitions is in allowing a smooth passage from point A to point B. The user is driven through the change, he is not presented with an immediate new result. It's these extra keyframes that make it possible to create pleasent motion-like web experiences. In
CSS Animated Headlines | CodyHouse
Animated Headlines A collection of animated headlines, with interchangeable words that replace one another through CSS transitions. I recently stumbled upon the Year in Music 2014 website. Among some fancy effects, the animated headline captured my attention. So I decided to put together a collection of CSS effects for headlines with rotating words! 👋 A new version of this component is available.
Expandable Image Gallery in CSS and jQuery | CodyHouse
Expandable Image Gallery An image that expands on click, going full-width and turning into a gallery. We often see the "2 blocks modules" design approach: 50% width image on one side, and text on the other. These modules can be used for an About us section, to explain product features, or, like in our example, for the product preview image and information sections. Generally the user can't interac
3D Rotating Navigation in CSS and JavaScript | CodyHouse
3D Rotating Navigation A 3D rotating navigation, powered by CSS transformations. Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability standards. Another good example is mobile apps: animated elements are key ingredients of the user experience. In this case a 3D menu can't just be fun. It h
Style Guide Template in CSS | CodyHouse
Style Guide Template A customizable Style Guide template, to gather design guidelines and share them with colleagues and clients. A Style Guide is a collection of design guidelines, to be used as a reference by teammates - and clients - while collaborating on a web project. While it's particular useful for big projects, it can be handy for small ones too. A common approach to a style guideline is
CSS Pricing Tables | CodyHouse
Pricing Tables Simple responsive pricing tables, in 3 different styles and with a bouncy animation while switching to different plans. A ready-to-use pricing table is one of those resources to have in our toolbox. They are not particular challenging in terms of design and user experience, yet they represent a key section of our web page: it's where the potential client takes action. We put togethe
3D Animated Mockup in CSS and jQuery | CodyHouse
3D Animated Mockup A simple template to showcase your application features through a smooth 3d animation, powered by CSS and jQuery. With CSS 3D transformations supported by most modern browsers nowadays, we can enrich our web projects with powerful animations, and be confident most users will enjoy the full experience. Today's template is just an example of how to turn a flat app screen into a 3D
Mega-Site Navigation in CSS and jQuery | CodyHouse
Mega-Site Navigation A responsive and easy to customize navigation for mega-sites, enriched by subtle CSS animations and support for devices with javascript disabled. We've already shared some navigation solutions here on CodyHouse. They can suit small to middle websites, where navigation is not that challenging. This time we wanted to work on something more complex: a mega-menu! About the challen
Animate SVG icons with CSS and Snap | CodyHouse
Animated SVG Icon How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library. Working with SVG files is not an option anymore. With a huge amount of high definition devices out there, it's not sustainable to export different sizes of the same bitmap assets and target specific device resolutions through CSS media queries. We need to rely on vector graphics whenever it's possibl
Mobile App Introduction Template | CodyHouse
Mobile App Introduction Template A basic template to showcase the best features of your app, enriched with a video slider for a better user understanding. A video is one of the most effective ways to introduce an app to an audience. Users often want to see how the app works before even deciding whether to download it or not. A screenshot could do the work, but with motion being a fundamental part
Rounded Animated Navigation in CSS and jQuery | CodyHouse
Rounded Animated Navigation An experimental full-screen navigation, animated using CSS and jQuery, that expands within a circle. I was checking out the new Ping iOS app. The effect when you tap on the circle to switch the page is too cool, so I tried to create something similar in CSS and jQuery. The result is pretty cool, hence we decided to release the snippet here on CodyHouse :) It's an experi
CSS Responsive Tabbed Navigation | CodyHouse
Responsive Tabbed Navigation A handy tabbed navigation, optimized for mobile devices, with support for both horizontal and vertical menu positioning. Tabbed navigations are very useful when you need to organize a considerable amount of side content. It's very common to use tabs in a product page, for information like delivery options, product material info etc. Another use of tabs is in dashboards
CSS and JavaScript Icons Filling Effect | CodyHouse
Icons Filling Effect An eye-catching filling effect for your icons, that can be used to make a simple page look cool and dynamic. Sometimes you just want to create something cool. Maybe for one of those pages - about us, our history etc - where you want to come up with something unique to support your brand. This effect can help you design a cool web page with just a few icons. The inspiration: so
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodyHouse | Web Design Nuggets