🌐 Public

Introduction

CSS tips and tricks

Ruben Janssen  — Graduated CMD at HAN university Arnhem, Front-end Developer. @kwartoverbier, Apple, Dancing, Canon, Photographer, Gadget G33k ...

Added by Ruben Janssen : “Difference between using and abusing css inheritance.

2 Used and Abused – CSS Inheritance and Our Misuse of the Cascade

We are abusing the CSS inheritance model. There, I said it. I know that the "C" of CSS stands for "Cascading", but that doesn't mean we need to cascade from the simplest selector all the way down to a complex component. Too often an starts with a base layer of styles from the root level tag, then gets a second

Added by Ruben Janssen : “Interesting read about AM (Attribute Modules) for CSS

3 Introducing AM - Attribute Modules for CSS

A few months ago, I read an article by Harry Roberts where he introduced an interesting concept for working with related classes in CSS. In his article, he describes the use of the [] characters in class attributes to help understand their purpose at a quick glance. He presents this example, arguing that it makes the class declaration more scannable

Added by Ruben Janssen : “Pure css parallax scrolling :)

4 Pure CSS parallax scrolling websites

This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website. Parallax is almost always handled with JavaScript and, more often than not, it's implemented badly with the worst offenders listening for the scroll event and modifying the DOM directly in the handler, triggering needless reflows and paints. All this

Added by Ruben Janssen : “Be careful with z-index

5 The Z-Index CSS Property: A Comprehensive Look - Smashing Magazine

Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results - as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under

Added by Ruben Janssen : “Play with bouncy transitions.

7 Bouncy transitions

Using CSS to add animation and transitions is a great way to add polish to an interface. Let's discuss how adding one property can bring a bit of bounce to your transitions. See it in actionCSS TransitionsThe CSS transition property tells the browser what aspects of an element to animate, if the element's properties change. For example, an element might

Added by Ruben Janssen : “Clipping paths in with CSS & SVG

8 Clipping in CSS and SVG - The

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering

Added by Ruben Janssen : “Should have posted this a while ago but didn't. I started working with the BEM principle and it's great when used correctly. Especially in combination with SASS

9 MindBEMding - getting your head 'round BEM syntax - CSS Wizardry

One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher ... BEM - meaning block, element, modifier - is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give

Added by Ruben Janssen : “The possibilities of dynamically colorize video rendering in CSS an why you shouldn't (yet?).

10 Dynamically colorize videos with CSS

How do you colorize a video in the very same colors you use in your webdesign? Of course, in CSS. Now what do you do if you have different colors and want them to be reflected in your video? Yes, you animate it. Caution: The following technique is a proof-of-concept that might have a heavy impact on your CPU &

Added by Ruben Janssen : “Fully responsive background image in CSS only

11 Responsive Full Background Image Using CSS - Six Revisions

By Jacob Gube In this tutorial, we'll go over the simplest technique for making a background image fully stretch out to cover the entire browser viewport. We'll use the CSS background-size property to make it happen; no JavaScript needed. Download Source from GitHub Examples of Responsive Full Background ImagesHaving a large photo that covers the entire background of a web

Added by Ruben Janssen : “Sassy Z-index for complex layouts

12 Sassy Z-Index Management For Complex Layouts

Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts1, keeping track of them as their numbers increase can be hard - and once they start to spread across CSS files, forget about it! Because z-index can make or break a UI element's visibility and usability, keeping

Added by Ruben Janssen : “Parallax scroll with css

13 Creating Scrolling Parallax Effects with CSS

While this solution is elegant on desktop computers, it does not function on mobile devices. To create a mobile-compatible pure CSS parallax scrolling effect, please visit this post by Keith Clark. I generally dislike ESPN because they're the McDonalds of sports news but they recently did a piece on Luis Suarez that was eye-catching. The content itself was great but

Added by Ruben Janssen : “Write maintainable code with single responsibility.

15 Single Responsibility

When it comes to writing modular CSS, I try to stick to the Single Responsibility Principle wherever possible. This will limit the scope of your modules and allow you to easily build and combine them to create flexible style patterns. Definition In object-oriented programming, the single responsibility principle states that every class should have a single responsibility, and that responsibility

Added by Ruben Janssen : “If you need some CSS animation basics

16 A Beginner's Introduction to CSS Animation

Nowadays, more and more websites are using animations, whether that be in the form of GIFs, SVGs, WebGL, background videos and so on. When used properly, animation on the web brings life and interactivity, adding an extra layer of feedback and experience for users. In this tutorial I am going to introduce you to CSS animations; a highly performant way

Added by Ruben Janssen : “Using sprites with sass, the easy way.

17 Spriting with Sass and Compass

As web developers have become more concerned about browser performance a technique called "image spriting" has emerged that is designed to reduce the number of requests made to the server. As it turns out, fewer requests made the server (when there is no significant difference in the combined size of the files delivered) can make a big difference in how ...

Added by Ruben Janssen : “Tips for writing maintainable css

19 Formatting CSS

The following article represents my preferences regarding formatting CSS (in a large web applications). Motivation beyond formatting CSSStyle matters. Readability, how quickly you can scan through selectors and their properties also matter. A lot. Having a clear structure is important. Naming convention is tough. All this is often underestimated. Develop your own set of rules and stick to them, document

21 Height equals width with pure CSS

DescriptionIf you have an image with a certain aspect ratio you can easily keep the proportion with the "auto" value. Like: img{ min-width: 100%; height: auto; }The problem is that you can't use the "auto" value for the height property of a block element like a DIV or alike. It will always resize depending on the inner content/elements. The trickI

23 The Extend Concept

All three of the most popular CSS preprocessors support extend. I don't have any data, but in my experience this feature is confusing at first and thus a bit under used. I thought we could talk a bit about how it works, why and when to use it, some gotchas, and what it might be like in the future. The

jarodym

Freshman

  • 0 Playlists
  • 0 Followers

lowlo

Freshman

  • 0 Playlists
  • 0 Followers

Dominic da Costa

Freshman

  • 3 Playlists
  • 18 Followers

sebastian odell

Freshman

  • 0 Playlists
  • 0 Followers

Michele Petrone

Every day's better

  • 0 Playlists
  • 0 Followers

qwerty00

Freshman

  • 0 Playlists
  • 0 Followers

frank

Freshman

  • 0 Playlists
  • 0 Followers

vuplesk

Freshman

  • 0 Playlists
  • 0 Followers

gorillawit

Freshman

  • 0 Playlists
  • 0 Followers

NAVIN KUMAR CHAHAR

I AM HUMAN ,SIMPLE AND STRAIGHT.

  • 0 Playlists
  • 0 Followers

Abu Hauri Asy-Syifa Falisha

Freshman

  • 0 Playlists
  • 0 Followers

lucasdidthis

Freshman

  • 0 Playlists
  • 0 Followers

abdallah alshaer

big ambition and crazy dream

  • 0 Playlists
  • 0 Followers

Kong Lingjun

Freshman

  • 0 Playlists
  • 0 Followers

Rguerra

Freshman

  • 0 Playlists
  • 0 Followers

Maha Alharbi

Freshman

  • 0 Playlists
  • 0 Followers

Alexis Lawson

Freshman

  • 0 Playlists
  • 0 Followers

sajid_1000

Freshman

  • 0 Playlists
  • 0 Followers

Amro El-Samman

Websites/UX Designer

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?