Morphing Buttons Concept. Ten CSS One-Liners to Replace Native Apps. Håkon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards.
Earlier this year, we published his blog post, “CSS Regions Considered Harmful.” When Håkon speaks, whether we always agree or not, we listen. Today, Håkon introduces CSS Figures and argues their case. Tablets and mobile devices require us to rethink web design. Moused scrollbars will be replaced by paged gestures, and figures will float in multi-column layouts. Paged designs, floating figures, and multi-column layout are widely used on mobile devices today.
Over the past years, I’ve been editing two specifications that, when combined, provide this kind of functionality: CSS Multi-column Layout and CSS Figures. CSS Regions Matter. By Sara Soueidan I wrote this article before the news came out that Google decided to pull Regions out of Blink, which, in my opinion, is a big loss for the web community.
So, even though the content of the article may go in vain, I think it’s still worth sharing why I think CSS Regions mattered, and wish they weren’t ditched like that. I hope you guys like it anyway. CSS Vocabulary. CSSynth. Blueprint: Responsive Full Width Tabs. Sushi Gumbo Beetroot Sushi gumbo beet greens corn soko endive gumbo gourd.
Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Pea Sprouts Fava Soup Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Turnip Broccoli Sashimi Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Asparagus Cucumber Cake Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.
Magis Kohlrabi Gourd Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Inspiration for Item Transitions. Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background.
State transitions are done using CSS Animations. View demo Download source. Simple Stack Effects. A set of simple stack effects for inspiration.
The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As seen in image grids or on scroll websites as creative effect. View demo Download source. Image Lightbox, Responsive and Touch‑friendly — Osvaldas Valutis. As for the image lightboxes, I have always lacked simplicity for them.
I mean not only the visual design, but the overall experience: from implementation to UX. All due respect, but I have never liked any of these light-fancy-face-boxes. They all were solving problems that just don’t exist: lots of unwanted features by default, total mess in markup, no native behavior for touch screens. Circle Hover Effects with CSS Transitions. From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles.
Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it! Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Create 3D Social Media Buttons with CSS3. SpritePad - Create and edit css sprites.
UI Animation and UX: A Not-So-Secret Friendship. Using the words “animation” and “the web” together tends to conjure up memories of frantic searches for the “skip intro” button to save ourselves from a terrible sensory assault.
Animation on the web has hit some pretty sad lows, there’s no arguing that. But adding motion to our work can be meaningful and functional—when we find the right circumstances. Article Continues Below When used as more than just a subtle design detail, animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. It can improve the user experience.
Perspective Page View Navigation. Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.
This navigation idea is seen in mobile app design and we wanted to explore some more effects. View demo Download source Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. We’ve experimented a bit and we’ve come up with a small set of effects that take the page and move it in 3D to reveal a navigation (or some other content if you like).
Please note that this is highly experimental, so let us know if you find any bugs or problems. Fullscreen Overlay Effects. Dot Navigation Styles. Today we'd like to share some subtle effects and styles for simple dot navigation with you.
These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion. View demo Download source Small UI elements usually don’t get too much attention when it comes to creative effects. They are often neglected because of their size. But they can offer a great opportunity to add some subtle, yet interesting effects. CSS-only Menus. Techniques for Creating Textured Text. In this article we'll explore all the current techniques for creating image or texture filled text and show you how to apply them. View demo Download source In this article we’re going to explore several techniques that can be used to create textured text or apply a background to text.
Please remember that some of the techniques covered in the article are experimental with very low browser support, and may not be the best technique to use when you’re building real projects that need wide browser support. I’ve included a screenshot for each demo, the link to the demo in the end of each technique. You can also click the screenshot to see the respective demo. Text Shadow Generator. Use this CSS3 text shadow generator to easily add text shadow styles into your web project. Your browser does not support the CSS3 text-shadow property. You can still use this tool to generate the CSS3 rule, but you won' be able to see the results. The Ultimate Flexbox Cheat Sheet. Animated Opening Type. A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann's Open Type project and it's a very creative way to display and play with letters.
Tetris & The Power Of CSS. To be really good at CSS, you have to learn CSS. I know this sounds like a tautology but I've become aware of a peculiar attitude that preprocessors such as SASS are somehow successors to CSS. Some SASS and LESS nerds are fond of proliferating the following aphorism. It should be noted that its author did not himself intend it as an advocation of preprocessors. The four stages of CSS:1. High Performance Animations. We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. CSS Overlay Techniques. There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements.
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial. Circle Hover Effects with CSS Transitions. The Box Model. CSS selectors.