Christmas greeting: An experimental CSS Grid game
We want to wish you Merry Christmas with this experimental retro game based on CSS Grid, with SVG animations and other surprises. Come on, Santa needs you help!
Tag: CSS
In this section we cover topics related with CSS (Cascade Style Sheets) which is the code that manages the design and appearance in Web Design. You will find resources and links about projects and showcases to get inspired. Moreover, these tutorials about CSS will help you to improve your responsive web design workflow, with new CSS3 specifications and media queries. Start improving ypur CSS knowledge!
Manual CSS optimization to improve website load time
We review some principles and tips on how to optimise our CSS files to improve the load time of the web and thus improve the SEO and UX of our project.
Progressive Disclosure with CSS
We apply the technique of progressive disclosure in examples with CSS only to improve the user experience.
CSS4: The new version of CSS that will never exist
Much is said about the new version of CSS, however CSS4 will not exist. The cycle of updates of CSS1 and CSS2 will change radically. We see what will happen in the future.
Examples of CSS Grid in production
Whenever a new technology arrives, we have some reluctance to use it in our projects because of the problems that may exist. Through this list of websites that already use CSS Grid, we want to show you how it is a tool that is mature and compatible enough to be incorporated into our projects.
Editorial Design and CSS Grid: Inspiration and examples
Thanks to CSS Grid, the editorial design and web design are closer than ever, serving the designs of magazines and publications as inspiration for web projects, as some of these examples.
Feature Queries in CSS. How do they work?
If you like to use the new CSS tools, but you are worried about possible compatibility problems with different web browsers, do not worry. With Feature Query you can use all of them, making sure that they will work regardless of the browser from where your users enter.
Gridexamples.com: what makes you work in a Side Project
These last weeks we have been working on a Side Project called Gridexamples.com, a showcase with examples of websites in production that use CSS Grid. We will review what we have learned during its development.
Christmas greeting: mini Game with HTML, SVG and CSS
Christmas is already here! And with it our Christmas card, this year, in the form of a game designed with HTML, CSS and JS. Can you help Santa decorate his tree correctly? Merry Christmas!
Time progress bar with CSS
In this article we are going to experiment with a new value for the CSS position property to create a progress bar reading the articles without the need of using PHP or JavaScript, just HTML and CSS.
How to create a floating social bar with HTML and CSS3
In this demo you will see how to create a horizontal social bar to share your articles. We will model it so that it stays fixed and floating in the lower part of the screen. All with HTML and CSS3.
CSS to the rescue: Improving UX in forms
Forms are one of the most forgotten element in web design. But this doesn’t make much sense because forms are where the user interact with our apps or website. Let’s revise how we can improve the UX with new CSS pseudo-classes.
Creative examples of 404 error with CSS
404 error pages are one of the most neglected sections in web design. With these designs and CSS animations there are no excuses for not having a creative and funny design.
Responsive subscription forms for newsletters with CSS
Examples of CSS and HTML designs of subscription forms for newsletters perfect to find a little inspiration. They are easily applicable to any form, especially the WordPress subscription widget.