Intrinsic Placeholders with the Picture Element. Picture + Intrinsic ratios = My new bestfwend. The leaner/faster your site is, the more noticeable/painful image loading becomes, especially with hero images. Layout getting recalculated when each image arrives results in a spastic hurk-jerk page reflow. This bothered us enough on DayTrip to find a fix. Common workarounds tend to be load a grey placeholder.gif or even a blurry image, then lazyload the actual image in later. Here’s a demo of what we came up with (try your hardest to ignore the FOIT 😖). Intrinsic Ratios aren’t new, but paired with the <picture> element it’s a beautiful little technique with little-to-no extra markup: I built out a little “Intrinsic” Sass component that draws intrinsic ratio box to match your image’s aspect ratio.
It could be used for video embeds as well. Here’s an example of it working inside a rudimentary Media component. So far I like it. Absolute Horizontal And Vertical Centering In CSS. Flexbox’s Best-Kept Secret. Let’s get flexible! Of course if you read the spec, you’ll see that auto margins are referenced right in the middle: Spec Reference: 8.1. Aligning with auto margins. If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied. For example, a <div> with the style margin-left: auto would be pushed all the way to the right of the flex container, with the left-side margin taking up any extra space between the left edge of the element and its previous sibling. If you don’t specify a direction, simply applying margin: auto, a flex item would evenly distribute any extra space on either side of the itself equally.
This is a way to center one or more items along the main axis. Adding margin: auto to two or more flex items is essentially the same as applying justify-content: space-around to the flex container. So what’s the bottom line? DocumentCSS - DocumentCSS. Naming Things ◆ 24 ways. Gridlex - Just a Flexbox Grid System. Creating an Animated Menu Indicator with CSS Selectors. The following article is by James Nowland, a front end developer for Headjam, a creative agency in Newcastle, Australia. James has created a fairly simple little effect here, but one that you might think would require a little JavaScript. Instead, it uses some clever selector usage. In this article, I'll cover creative ways of using sibling selectors and pseudo elements to make a CSS-only menu indicator that would normally be achieved using JavaScript.
Here is what we will be making: We'll break this down into three steps: Basic structure and stylingBuilding the indicatorMaking the indicator move We'll also be leveraging SCSS throughout this example to take advantage of the variables and functions Sass offers that make things much easier to maintain in the long-run. Step 1: Basic structure and styling First off, let's set up the HTML for the menu using a basic unordered list structure.
Nothing too fancy so far. Defining the variables Styling things up Step 2: Building the indicator. Stretchy Navigation in CSS and jQuery. A rounded navigation trigger that stretches on click/tap to reveal the navigation items. Browser support ie Chrome Firefox Safari Opera 9+ While surfing some Dribbble shots, we came across this nice shopping list concept by Hila Peleg, which inspired today’s resource. We decided to apply a similar idea to a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add content button and 3) edit content button. Icons: Nucleoapp.com Creating the structure The HTML structure is pretty basic: a nav.cd-stretchy-nav is used to wrap an unordered list (containing the navigation items) and an a.cd-nav-trigger (for the menu icon). An additional span.stretchy-nav-bg element is used to create the stretchy background.
Adding style We created the .cd-stretchy-nav class to define the main style for the stretchy navigation. Events handling. Background Image Shapes. The following is a guest post by Joe Markevicius. Joe had a particular design he needed to implement for the BFI's Britain on Film website. Like a true front end developer, Joe considered the requirements and went through many different options to find the best approach. He'll take us through that journey here. I don't know about you but I love this kind of thing. In July this year BFI's Britain on Film launched to widespread acclaim. An archive of historical footage like no other, Britain on Film invites viewers to take a journey through British history. One of the key features the team at Ostmodern had to design and build for this product was a landing page which invited users to explore the archive, discovering content by time, subject and location. Here's a video showing the final result: The brief for the project made clear that this task needed to be split into manageable chunks and had to account for the following restrictions: This is a Sketch wireframe of the layout we need: Pros.
Motion UI. Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6. Getting Started Install Motion UI with Bower or npm. The package includes a CSS file with a bunch of premade transitions and animations, along with the source Sass files, which allow you to build your own. bower install motion-ui --save npm install motion-ui --save Motion UI includes a bundle of pre-made effects as CSS classes. But where it really gets fun is creating your own effects. Transitions The core function of Motion UI is to transition components in and out. Show a Thing The Motion UI package includes a small JavaScript library to trigger these transitions. MotionUI.animateIn('#element', 'fade-in'); MotionUI.animateOut('#element', 'fade-out', function() { console.log('Transition done!
') Transitions are highly customizable. Animations. CSSGram. What is This? For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters. Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS.
What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web! We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. Browser Support This library uses CSS Filters and CSS Blend Modes. Google Chrome: 43+ Mozilla Firefox: 38+ Internet Explorer: Nope Opera: 32+ Safari: 8+ For more information, check on Can I Use. Usage There are currently 3 ways to consume this library: 1. If you want to work locally, do the following:
CSS Glossary. Comments in CSS are signified by a forward-slash and asterisk. Example Definition Properties are defined within selectors by defining a property and a value. They are separated with a colon and delineated with a semi-colon. Syntax Read more Defining many properties Each CSS rule can have as many properties as you like.
Padding The padding is the spacing between the content and the border (edge of the element.). Margin The margin is the space around the element. Font-family The font-family property sets the font of an HTML element's text. What are selectors? Selectors are used in CSS to select the parts of the HTML that are being styled. Selector { rules; rules; rules; } Class name selectors You can also select HTML elements by their Class name. Element selectors You are able to select HTML elements first by simply using the name of the element. ID selectors Attribute selectors. Effects for Card Stacks. Tree vector designed by Freepik If you enjoyed this demo you might also like:
Using Quantity Queries to write content-aware CSS - tomango. The dawn of HTML5 and CSS3 provided a wave of new technologies promising to change the way we build web applications. Web developer reactions to most features were similar, an initial buzz of excitement while we pondered the possibilities brought forth by these shiny new techniques followed by a crushing sense of disappointment when we realised just how long it would be before we could start using them. Some crest-of-the-wave developers renounced any form of support to older browsers and pressed on with the new features.
However, many developers did not have the option to blindly assume that all users ran the latest cutting edge browser, if we were to do that, we’d segregate a significant portion of our users. For this reason, it’s usually a game of patience when it comes to using new frontend features in the wild. This is why it’s so exciting to discover a feature that is both very useful and can also be used on a live website without large spoonfuls of graceful degradation. Added bonus. Chart.css - A Simple CSS Chart System. Stop Printing Ugly WordPress Pages With This Easy Fix.
As a WordPress designer, you fret and worry about how your pages and your posts look – on the screen. That’s what it’s all about, right? You look at that new travel-story website you just finished, and it looks great in all the current web browsers. It’s fabulous. The client loves you. A week later, you’re sitting at your computer when the client calls and says, “Hey, our customers are trying to print stuff off that new website you made for us, and everything is a mess – you have to fix that – now!!!”
The client continues her rant – throwing in a few expletives about WordPress – while you (in a total panic) click over to the client’s site, and don’t see anything wrong. Then you (for the first time ever) choose your browser’s print command, your printer starts whirring and clacking, and by the time you slide over to your printer it’s already printed out three sheets of paper when it should have just been one sheet. Your client is right (aren’t they always?). Web pages are ethereal. Reverse Text Color Based on Background Color Automatically in CSS.
Over the weekend I noticed an interesting design for a progress meter in a videogame. The % complete was listed in text in the middle of the bar and didn't move. But that text was the same color as the background of the bar that was filling up from left to right. It seemed like the background was going to make the text invisible once they overlapped, but instead, the text color reversed to be white instead anywhere it overlapped with the background. My first thought was this: how can we replicate this design pattern and what might we learn along the way? Here’s what I came up with, but make sure to check this demo on the latest version of Chrome to see everything working correctly: See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen. Pretty cool, huh? Let’s take a look at the markup first The .wrapper will hold our elements in place, .bg will be our loading bar that increases over time and our .text element will be used as the percentage information.
The Color Swap. Image Grid Effects | Demo 2. Stand by me. Diamond grid layout with Sass. Since I started my career on the web, I’ve been building websites that follow standard grid layouts. It got to a point where I was telling an intern at my company that developers think in rectangles. I mean, there’s nothing wrong with rectangular layouts. They’re like your mom’s Volvo, steady and reliable. But sometimes, it’s fun to try something different. I’m lucky enough to work with some awesome designers, and for a new project, they came up with a diamond-based grid layout. Well then, challenge accepted. (•̀o•́)ง Attempt 1: Just rotate them divs On the first pass, I hadn’t gotten my hands on the actual design yet, but started experimenting with HTML and CSS first, just to try out a few ideas I had. The initial mark-up for the grid was pretty simple. Sass variables came in very handy in this case as I could create a grid-unit to use as a base for calculating the widths of all the diamonds.
$gridUnit: 95vw / 16; $small: $gridUnit * 2; $med: $gridUnit * 3; $large: $gridUnit * 4; Modernizr Documentation. News. After what appears an eternity to us and the wider development community we are ecstatic to announce the release of Modernizr 3.0! This is a massive release and from our last release almost 2.5 years have passed - an unacceptable timeline.
We plan to fix this and have faster releases where it makes sense. What's new and exciting? A lot! We restructured how we write our detects. we no longer have the concept of core tests, and we redesigned and built the site from the ground up to give the website a refresh as well as make the builder a whole lot more powerful for beginners and advanced users. From just creating a simple build to grabbing a config, to implementing in your build process, through to a really cool solution of dynamically creating a custom package that can be installed via bower. Along with this internal restructure, we’ve added over 100 new detects by the community! Modernizr changes: Detects APIs The website Some things to point out: Thanks. Modernizr: the feature detection library for HTML5/CSS3.
CSS Image Effects #1: Vintage Washout. Last week, I gave a talk at CSS Conf EU called PS is Dead! : Editing Photos in CSS. My original idea was to outline 10 things you traditionally used Photoshop for that you can now just do in the browser, but when I started to look into filter effects and blend modes there was just so much to explore! I showed a few of those effects in the talk, and now I'm going to write a series of posts to split it into more digestible and sharable bits. Let's start with something simple and effective!
The Washout Effect This effect is something we often see in filters trying to get a vintage feel. What is happening here is that we are replacing the dark tones with a slightly lighter shade. Step 1: Blend-Mode: Lighten We apply the lighten blend mode to either an overlapping element or a pseudo element. Please note: the <img> element cannot have its own pseudo elements like :before and :after. Step 2: Determine Darkest Color Application @Mixin For the Win Sass CSS Output More CSS Effects: Typebase.css: Customizable typography stylesheet. SUIT CSS: style tools for UI components. Elephants, The Three Code Ilities, & Two Months With CSS Modules. Watch: Creating High Resolution Background Images with CSS. Build Awesome Websites | 5 Ways to think about CSS Flexbox. Flexbox Cheatsheet Cheatsheet. How alignment and hyphenation improve your text's impact.
9 Creative CSS Form Designs From Codepen. Making and Breaking the Web With CSS Gradients. Le petit flexbox illustré chez Vincent Valentin. Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally. The future of layout with CSS: Grid Layouts. Word Wrapping Woes. Learning FlexboxSarah Parmenter - User Interface Designer.Sarah Parmenter - User Interface Designer. Score Quick Style Wins with These CSS Animation Tools for WordPress. 8 Responsive CSS Grid Systems For Your Web Designs. Bootstrap Hover Image Gallery. Rucksack | CSS Superpowers. Panique/php-sass. CSS element() function. Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box. Clippy — CSS clip-path maker.
Glen Maddern: Internet Pro. Adding Social Media Icons to WordPress With CSS Sprites. Designing Hover Styles and the Future of the Technique. Laying Out A Flexible Future For Web Design With Flexbox – Smashing Magazine. How Floating Works. Showing and Hiding Content With Pure CSS3. Inspiration pour les intégrateurs #48 : Des titres originaux. CodePen - Front End Developer Playground & Code Editor in the Browser. Understanding Reference Boxes for CSS Shapes.
Constructing CSS Quantity Queries On The Fly — Smashing Magazine. Quantity Ordering With CSS. Advanced CSS filters. CSS vs. SVG: Graphical Text Effects : Adobe Dreamweaver Team Blog. Designing Flexible Pie Charts With CSS and SVG — Smashing Magazine. 12 Little-Known CSS Facts. Off canvas menu. Page Scroll Effects. A Look at Some CSS Methodologies. The Debate Around "Do We Even Need CSS Anymore?" | CSS-Tricks. CSS3 2D Transforms. Score Quick Style Wins with These CSS Animation Tools for WordPress. 25 ressources CSS et plugins Javascript pour vos interfaces | Webdesigner Trends - Webdesign et inspiration.
Selectors. CSShake: CSS classes to move your DOM. Programme #css-day-2015. Tips for Writing Modular CSS Matt Lambert. Home - A to Z CSS. CSS-Only Responsive Layout with Smooth Transitions. CSS Sprites: What They Are, Why They're Cool, and How To Use Them. SpritePad - Create and edit css sprites. Useful Collection Of Free CSS Libraries & Resources. Inspiration for Text Styles and Hover Effects. CSS Dig. How to make a carousel using only HTML and CSS (no JavaScript required!) CSS Margin. Simple Icon Hover Effects with CSS Transitions and Animations. Apprendre les mises en page CSS. Comment centrer verticalement sur tous les navigateurs. 8 CSS Tools for CSS Phobics - The Hive. Sass pour les web designers par Dan Cederholm. CSS Filters. Pure CSS Slide Up and Slide Down.
VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices. Une taille de police en fonction de la largeur d’écran - CSS / CSS3. How to Center in CSS. CSS3 Awesome Link Effects. Can I use... Support tables for HTML5, CSS3, etc. Focal Point: Intelligent Cropping of Responsive Images. Retina Display Media Query. Content Folding | CSS-Tricks. CSS3 box-sizing property. Shade. Simplifiez-vous la création des gradients CSS3 avec Shade | BlogDuWebdesign. Apprenez à vous passer du Javascript avec le sélecteur CSS ~ | BlogDuWebdesign.