All the CSS-related tutorials, ideas and various posts in Stampede Constructs
Guy Routledge from atozcss is a big fan of using CSS pseudo elements as he could do a lot with them and add all sorts of visual flair to the page without cluttering up the markup. In this 6:36 minutes video, he is going to talk about:
Be sure to also check the transcript and code snippets for this video in the link itself. Enjoy!
SVGs are pretty great when it comes to creating responsive resolution-independent logos and other graphics. An SVG can be embedded on a web page in many ways, as follows:
In this brilliant article by Sara Soueidan, she covers embedding techniques, how to apply the “Padding Hack” and how to use inline media queries to make SVGs responsive.
The biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply styles to them. Suitable for beginners in the web industry, Chris Coyier from css-tricks has published an article about understanding how CSS selectors would work. This article covers, among others – what the available selectors are, how to choose and use selectors in right way. Hopefully you’ll find it useful!
In my previous posts, I have already shared 2 posts about a number of demos and tips on creating an accordion menu. This time, I would like to share a demo of a sliding tiles accordion menu, a brilliant experiment by Wifeo. The logic behind this demo is actually quite straightforward. The tiles each respond to mouse over and slide to the sides to reveal text corresponding to the active tile. Wifeo achieved this through CSS visibility property to show and hide the text and transition for sliding the tiles on hover. Try it out!
Usually when the user selects a text or the whole paragraph, a highlighted effect will appear with white background along with the font highlighted in blue, or any other colours for that matter. With this feature from Ahmad Anas codepen demo, highlighted text select effect will be replaced with transparent outline font by using CSS. Unfortunately this feature is only available for Chrome and Safari for now.
Parallax effects are almost always handled with JavaScript and, more often than not, the result is not very impressive. In his blog post, Keith Clark found a way to achieve pure CSS parallax effect thus removing all the web performance issues. The result is consistent frame rates and perfectly smooth scrolling. You can also combine the effect with other CSS features such as media queries or supports. When used for the right purpose, CSS parallax effect engages user better and gives them that extra delight while scrolling down your website. Learn more on how Keith does it, along with some demos.
Every web developer knows CSS is typically used to style HTML elements but have you ever wondered if it is also possible to employ CSS to perform tasks otherwise done through JavaScript? The answer is yes. Although it will not completely replace JavaScript’s function features, with a little creativity and trickery, CSS could be a quicker, easier and comparable solution. In his article, Trevan Hetzel has shared 5 things you won’t believe are built with only CSS. There are some usability disadvantages as highlighted by a commenter but give it a spin and see if you could improve it.
An image comparison slider is a good design approach allowing user to compare differences between two images. After seeing post about “Before and After” by Dudley Storey, Lea Verou has created an experiment to create the same effect by using minimal and purely CSS code without JavaScript. The original markup shows images as CSS backgrounds, so it posed a problem for screen readers. Instead, Lea overlaid a div on an image and made it horizontally resizable through the resize property. Take a look at the CSS image comparison experiment and let us know what you think.
At Stampede we love to share how web developers around the world talk about their innovation or familiar technology in their own creative ways especially through codepen. scotch.io also has same interest and they started to post weekly series about top 10 codepens of the week. Good start to learn the best tricks from them.
Stampede Design