Different Tricks on How to Make Bootstrap Columns All the Same Height Bootstrap 3 (and now Bootstrap 4) are amazing CSS frameworks that can make the lives of developers of any skill-level easier. When I was more of a beginner and I first started using Bootstrap, I used every feature of it possible and used to hack it to get things to work the way I wanted. Now, with more experience, I mostly just use their reset and grid system. I now rarely alter any of its core functionality. Bootstrap's grid system is fantastic and near perfect in my opinion. # Equal Columns? I've made a demo CodePen to illustrate the issue when content in columns are different lengths and how it messes with design. Padding of 25px is added to the top and bottom of all Bootstrap stuffA subtle border wraps all .colsVarious backgrounds are used to see how things stack on each other and how this all works # Option 1: Use JavaScript or MatchHeight.js The first solution I'm going to use is with JavaScript. There's definitely pros and cons to taking a JavaScript approach. Match all heights
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 Perfectly Positioned Plusses Ever seen those thumbnails which, when hovered over, reveal an icon in the middle to suggest what's about to happen? Ever wondered how the effect is achieved? Ever tried, but didn't manage to get the icons dead center, especially when your thumbnails weren't of fixed dimensions? Then this Quick Tip is for you.. I'm talking about thumbnails which you might click to trigger a lightbox, or perhaps a thumbnail which links to a portfolio piece. This Quick Tip is aimed at those of you who have an understanding of CSS, have more-or-less figured out what positioning is about, and are looking for the perfect excuse to put it to use.. Step 1: Starting Block Let's quickly throw some documents together to demonstrate what I'm talking about. Then we'll begin our styles.css file with some reset rules. Next, to give our page a bit of layout structure, here are three columns, within a container: Step 2: Images It's time to add some images to the mix. A good start. Step 3: Hover State Step 4: Icon Important!
About normalize.css – Nicolas Gallagher Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. Normalize.css is currently used in some form by Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks, toolkits, and sites. Overview Normalize.css is an alternative to CSS resets. The aims of normalize.css are as follows: Preserve useful browser defaults rather than erasing them.Normalize styles for a wide range of HTML elements.Correct bugs and common browser inconsistencies.Improve usability with subtle improvements.Explain the code using comments and detailed documentation. It supports a wide range of browsers (including mobile browsers) and includes CSS that normalizes HTML5 elements, typography, lists, embedded content, forms, and tables. Despite the project being based on the principle of normalization, it uses pragmatic defaults where they are preferable.
animation The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property, like so: Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property, or its eight sub-properties, to give more control over how those keyframes should be manipulated. Sub-properties These sub-properties can then be used like so: Here’s a full list of which values each of these sub-properties can take: Multiple steps If an animation has the same starting and ending properties, it’s useful to comma-separate the 0% and 100% values inside @keyframes: Multiple animations You can comma-separate the values to declare multiple animations on a selector as well. Performance Desktop
Beginner Concepts: How CSS Selectors Work Share this: monday.com helps you manage your projects. Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. In the examples below, the CSS would be in a file called something like style.css that is referenced from an HTML document called something like index.html. Here's what that HTML file would be like: <! And the CSS file would contain just the selector blocks like you'll see below. #ID selector #happy-cake { } <! #Leveling Up ID selectors are the most powerful type of selector in terms of CSS specificity. #Class Selector .module { } <! #Leveling Up Class selectors are your friend. #Tag Selector h2 { } <! #Leveling Up Tag selectors are at their most useful when changing properties that are unique to that HTML element. Don't rely on them too much though. #Attribute Selector [data-modal="open"] { } <! #Leveling Up Hardly an issue anymore, but attribute selectors aren't supported in IE 6. #Positional Selectors :nth-child(2) { } #Leveling Up
When to use margin vs padding in CSS Link types: preload - HTML: HyperText Markup Language <link> elements can accept a type attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not. You can see an example of this in our video example (see the full source code, and also the live version), a code snippet from which is shown below. And while this code won't actually cause preloading in any browsers — because video preloading isn't yet supported in any browsers — it still illustrates the core behavior behind preloading in general. <head><meta charset="utf-8"><title>Video preload example</title><link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"></head><body><video controls><source src="sintel-short.mp4" type="video/mp4"><source src="sintel-short.webm" type="video/webm"><p>Your browser doesn't support HTML5 video.
CSS3 transition on click using pure CSS Meet the Pseudo Class Selectors Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover: a:hover { } They are immensely useful in a variety of situations. Link-related pseudo class selectors :link – Perhaps the most confusion-causing link-related pseudo selector. :visited – Selects links that have already been visited by the current browser. :hover – When the mouse cursor rolls over a link, that link is in it’s hover state and this will select it. :active – Selects the link while it is being activated (being clicked on or otherwise activated). There is a fun technique to remember all the link pseudo class selectors. Input & link related pseudo class selectors :focus – Defining hover styles for links is great, but it doesn’t help out those who used keyboard navigation to get to the link. :target – The target pseudo class is used in conjunction with IDs, and match when the hash tag in the current URL matches that ID. Relational pseudo class selectors
Solving the CSS Padding Problem | TutWow I remember when I first started using CSS, something really ticked me off. That was that when I had an HTML file with a div in it, and I wanted to add some padding to that div, not only did the content inside of the div get “padded”, but the whole div increased in size. As you can imagine, this got really annoying, until one day I found the solution to the problem. Let’s start with an example of the problem. <! And the following CSS: Then I will get this result. And in a web browser, the result of that change would look like this file. By now you might be thinking “So what? So how do we fix this problem? <! And the new CSS file: As you can see, what I did is just wrap the #padded div inside another div called #container, and then moved all of the styles for the #padded div – except for the “padding: 20px” – to the styles for the #container div. Take a look at the finished, “fixed”, padding example. As an Update, I found one shortcut list of CSS tricks from my web hosting friend.
Quelle est la différence entre les chemins relatifs et absolus ? Souvent source d'erreurs, de pages introuvables, d'images manquantes ou de styles non appliqués, le format d'écriture des liens est très important. Et pourtant, on ne prend pas forcément garde à la façon dont on fait pointer ces dernier vers les différents fichiers cible. Suivant la convention d'écriture utilisée, de nombreux problèmes peuvent survenir. En effet, deux types d'écritures cohabitent, chacune avec leur spécificité propre : le chemin relatif (absence de slash initial) le chemin absolu (slash en préfixe du chemin) Sur le web Chemin relatif dossier/page.html La cible (page.html) va être cherchée par le navigateur à partir de la page html ou de la feuille de style qu'il interprète, dans le sous-répertoire "dossier". . ./ : signifie que la page est cherchée à partir du répertoire courant. .. ../ : signifie que la page est cherchée à partir du répertoire parent (on remonte d'un niveau). Il est tout à fait possible de remonter plusieurs répertoires. Chemin absolu /dossier/page.html
Write Better Media Queries with Sass Let's face facts: media queries can be a pain. They're difficult to write and they tend to get duplicated a lot. Sass includes a few helpful features that make media queries easier to work with. This article will show you these tricks and how you can use them to simplify your stylesheets. The Basics Let's take a look at a simple example. Here, we've set the font size of paragraphs to 16 pixels. Right away, you should be struck by how much code is required to do something as simple as responsive typography. Media queries are hardcoded in the code and copied where they're needed. Shortening Things Up Sass allows variables to be interpolated. Now, we can use the $tablet and $desktop media queries anywhere in our project without duplicating code. Mixins to the Rescue The code above works, but it's a bit difficult to read. Now, we can rewrite our example above to use these new mixins. We're not just limited to device sizes. Wrapping Up
CSS Specificity Wars | Stuff & Nonsense blog This entry was published on October 7th 2005 and, incredibly, is still one of the most visited pages on my website, so twelve years later I decided to update it with a new graphic to print and pin near your monitor. If you find this useful, consider saying “thank you” with a small donation. Join me, and together we can rule the galaxy as father and geeks! In 2005 I saw Aaron explain how the specificity of CSS selectors is calculated in a way which I hadn’t seen before. Then I came across a problem while building templates for a new project where two selectors behaved differently to how I expected and I realised that I had not completed my Jedi training. The Dark Side My problem was a simple one, how to serve a transparent PNG to browsers which support transparency and a GIF to browsers which didn’t at the time, without resorting to hacks, something that we did a lot back then. <div id="nav-supp"><p><a id="a-02" href="">Top</a></p><! My CSS starting point: Sith Lords Too much! Resources