サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
codyhouse.co
Chameleonic Header In this tutorial, we will create a chameleonic header that changes its style on scroll to match the color theme of the underneath section. Dependencies CodyFrame (CodyHouse front-end framework) Tutorial This effect uses the clip-path CSS property. The idea is to have a clone of the main header inside each <section> of the page. Each clone will inherit the style of the section it
Since the release of our framework a few months ago, we've been asked by many users why we opted for CSS variables, instead of SASS variables, even though we do use SASS in the framework. In this article, I'll go through the advantages of using custom properties and why they've become crucial in our workflow. Content: Creating and applying color themes Controlling the type scale Controlling the sp
Cookie Compliance We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.
Image Mask Effect An immersive transition effect powered by image masks and CSS transforms. We’ve been publishing in our library some nice mask effects powered by SVG properties. This time we took advantage of the PNG transparencies to zoom through the mask layer, into a project background image. If you want to change the color of the .png masks, you can easily do it in Photoshop (or any other gra
Schedule Template A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…) We’ve come across this web component many times: when we check the schedule of a conference, or the timetable of the classes of our gym. From a web designer perspective, it is handy to have a simple, responsive template to use if you ever need to cre
Stripe.Com Navigation A morphing dropdown that animates according to the size of its content. A few weeks ago stripe.com launched a new website design. It looks awesome. One thing we dig in particular is the morphing navigation dropdown: instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to mak
Clipped SVG Slider A simple slider, with morphing preview images animated using SVG properties. Here on CodyHouse we’ve published a lot of SVG experiments! What’s really powerful with SVG is the possibility to combine path animations with the clipPath element. Add a touch of CSS transformations and you got a spicy recipe! Inspiration: Music player animation by Veronika Lykova. Tool used: Snap.svg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quos, voluptate, sunt, in suscipit quibusdam quis dignissimos eligendi repellendus ipsam exercitationem adipisci nostrum fugit accusamus quae cum nisi accusantium eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates volup
Auto-Hiding Navigation A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up. Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. The idea behind this UX pattern is simple yet efficient: we want the navigation to be easy to reach all the time, so we stick it on top. However, we auto-hide it when t
Radial SVG Slider A simple, responsive slider, with a radial transition effect powered by SVG clipPath and mask elements. While browsing Dribbble in search of inspiration, we came across this interesting animation created by Tokito. The main idea is to show a little preview of the following slide, then scale it up when the user interacts with it. In order to create this effect, SVG clipping and ma
My Modal Content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! A rerum pariatur neque laborum earum, illum voluptatibus eum voluptatem fugiat, porro animi tempora? Sit harum nulla, nesciunt molestias, iusto aliquam aperiam est qui possimus reprehenderit ipsam ea aut assumenda inventore iste! Animi quaerat facere
Animated Transition Effects A library of animated transition effects, powered by CSS Animations. A few weeks ago we published a tutorial about how to create an Ink Transition effect using a PNG sprite and the steps() CSS timing function. That resource has since become one of the most popular here on CodyHouse, therefore we decided to team up with talented motion designer Gabriele Mellera to create
360 Degrees Product Viewer A simple, interactive resource that can be used to provide a virtual tour of your product. In e-commerce design, one of the main goals is to fill the gap between product and user. This is particularly relevant for high-priced goods. Hence, the importance to integrate interactive tools, to provide the user a way to “virtually experience” the product. Today’s resource is a
Ink Transition Effect An ink bleed transition effect, powered by CSS animations. I recently came across a couple of websites using ink bleeds as transition effects. A great example is the Sevenhills website. At first I thought they were using a HTML canvas powered technique (for allowing transparency), then I checked the source code and found out they weren’t using a video, but a PNG image sprite.
Products Comparison Table A responsive table to compare and filter through multiple products. If you’re developing an online store with plenty of products, in all likelihood you’ve been asked to work on this feature: the comparison table. The standard approach, that works in most cases, is to use a simple HTML table element. If you have 6+ products to compare, though, things can get tricky, partic
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariat
Sliding Panels Template A simple portfolio template, with project preview images that slide out to reveal the selected project. We’re not new to experimenting with portfolio templates. This time, we’ve been playing around with the idea of moving blocks of content as a way to transition from the main/gallery page to the project page. All panels move along the y-axis (x-axis on smaller devices), and
Advanced Search Form A search form with advanced filtering options and quick link suggestions. Getting the search experience right is never an easy task. The starting point is always the search form, which, in most cases, consists only of an input field plus a submit button. The search results page can be tricky to design, in particular if you have different content categories. For big websites an
Vertical Fixed Navigation #2 A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them. Our first concept of vertical fixed navigation is one of our most popular resources. This time, we tried to push this concept a little further. The basic idea behind putting round indicators on the side of a web page, is to give a hint to the user about t
Presentation Slideshow A simple presentation template in CSS and jQuery. Although presentations are usually created using native apps, we decided to challenge ourselves and design a presentation template for the browser. It wasn’t an easy task, for the way you interact with a presentation slideshow is different compared to how you scroll through a website: each unit/slide must be isolated, so that
Horizontal Timeline An easy to customize, horizontal timeline powered by CSS and JavaScript. Our vertical timeline is so far one of the most popular resources on CodyHouse. Many of you asked us to include a horizontal timeline as well. Here it is! Building a horizontal timeline was a bit tricky, because you can’t rely on the vertical (more intuitive) scrolling behaviour. We decided to separate tim
Stretchy Navigation A rounded navigation trigger that stretches on click/tap to reveal the navigation items. While surfing some Dribbble shots, we came across this nice shopping list concept by Hila Peleg, which inspired today’s resource. We decided to apply a similar idea to a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add
Stretchy Navigation Download Style:
Animated Intro Section A collection of fancy text effects, to animate the tagline and action buttons of your website intro section. Animations in web design are often used to drive the user’s focus to a specific section. One section you want to make sure to highlight is the main tagline, with the action buttons. A good use of typography and a wise choice of colors should do the trick. However we
Project Cards Template A portfolio template with expandable projects and a full-page navigation inspired by Primer app. Today’s resource is inspired by the Primer app, which makes a great use of cards and motion throughout its design. We applied similar effects to a portfolio template, with expandable items and a bold, full-page navigation. Images: Unsplash Creating the structure The HTML structur
Multi-Level Accordion Menu A simple CSS accordion menu with support for sub level items. Today's resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class selector on the checkboxes input elements. However we included a version with JavaScript as well, in case you prefer a subtle animation compared to the instant default effect. Yo
Responsive Sidebar Navigation An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas. Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today's snippet! Our Sidebar navigation can make you
Responsive Sidebar Navigation 👈Article & Download Download Marte, an HTML, CSS, JS Dashboard Template created by the CodyHouse team.
Animated SVG Image Slider A simple, responsive carousel with animated SVG paths used as transition effects. Last week we’ve been experimenting with SVG paths to animate the content of a full-page hero slider. Today we use the same technique to create a responsive carousel. This time, though, we used SVG paths to directly clip the slide images, with no need to show an intermediate layer. Images: Un
次のページ
このページを最初にブックマークしてみませんか?
『CodyHouse | Web Design Nuggets』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く