Using Custom Data Attributes and Pseudo-Elements
In Tutorials,
A tutorial on how to (ab)use custom data attributes and pseudo-elements for creating image captions.... read more
Manoela's Articles (454)
Loading Effects for Grid Items with CSS Animations
In Playground,
Some inspiration for loading effects of grid items using CSS animations.... read more
Responsive Icon Grid
In Blueprints,
A responsive grid of anchors with icons, text and some example hover transitions.... read more
View Mode Switch
In Blueprints,
A simple view mode switch that has two example layouts, a grid and a list. ... read more
Expanding Search Bar Deconstructed
In Tutorials,
A tutorial on how to create a mobile-friendly and responsive expanding search bar.... read more
Nifty Modal Window Effects
In Playground,
A set of experimental modal window appearance effects with CSS transitions and animations. ... read more
Dynamic Grid with Transitions
In Playground,
A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can ad... read more
Caption Hover Effects
In Tutorials,
A tutorial on how to create some subtle and modern caption hover effects.... read more
Creative Button Styles
In Playground,
Some creative and modern button styles and effects for your inspiration. ... read more
On-Scroll Animated Header
In Blueprints,
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.... read more
Responsive Multi-Column Form
In Blueprints,
A responsive multi-column form with example media queries for a flexible layout.... read more
Simple Icon Hover Effects
In Playground,
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.... read more
Tooltip Menu
In Blueprints,
A simple tooltip menu where the submenu will either appear above or below the main menu, depending on available space.... read more
Natural Language Form with Custom Input Elements
In Tutorials,
An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements.... read more
Product Grid Layout
In Blueprints,
A responsive product grid layout with some UI details for inspiration. ... read more
Horizontal Slide Out Menu
In Blueprints,
A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices. ... read more
Morphing Devices
In Playground,
An experimental morphing devices slideshow with CSS Transitions for showcasing responsive web design screenshots. ... read more
Vertical Timeline
In Blueprints,
A responsive vertical timeline layout with icons and example media queries.... read more