Autoprefixer: A Postprocessor For Dealing With Vendor Prefixes In The Best Possible Way | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a “postprocessor” for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain. Autoprefixer parses CSS files and a
Creating A 3D Cube Image Gallery | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. The following is a guest post by Kushagra Gour (@chinchang457). Kushagra wrote to me to show me a fun interactive demo he made. It touches on many of the concepts of 3D transforms in CSS, a topic we haven’t covered a ton here. So here’s Kushagra taking the reins to expl
Rundown Of Handling Flexible Media | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen.
CSS Style Guides | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting
The Difference Between 'return False;' And 'e.preventDefault();' | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example: $("a").click(function() { $("body").append($(this).attr("href")); return false; } That code would append the href attribute as text to the body every time a link was click
Crafting Minimal Circular 3D Buttons With CSS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. The following post is written by Brandon Pierce. Brandon saw some nicely designed buttons by Wouter on Dribbble and set about building them with CSS. They came out nicely and he agreed to post about the process here. Here’s what we are going to make in this tutorial: Vi
Poll Results: Popularity Of CSS Preprocessors | CSS-Tricks
From this we can infer that “most” people have tried or currently use a CSS preprocessor (54%). I go back and forth in my thoughts on this number. On one hand it seems a bit low considering how much talk there is about them lately and that this poll represents people that visit and interact with a website named “CSS-Tricks.” On the other hand, there is a bit of a uncomfortable legwork involved in
HTML For Icon Font Usage | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Where are we at right now in terms of the best markup for using icon fonts? Let’s cover some options I think are currently the best. You want the icon to enhance a word You want the icon to stand alone but still be functional or informational And our major goals here are: As good of semantics as we
Sass Vs. Less | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. “Which CSS preprocessor language should I choose?” is a hot topic lately. I’ve been asked in person several times and an online debate has been popping up every few days it seems. It’s nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one langua
Fighting The Space Between Inline Block Elements | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I’ve seen this come up a couple of times lately on Twitter and then an interesting Dabblet so I figured it would be an important thing to document. Here’s the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them. In other words: <nav> <a h
Burst Title | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn’t paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title scr
YouTube Popup Buttons | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. There is a certain style of button on the latest YouTube design (most easily found in the footer) where the default state of the button has a very subtle bevel to it, but on :hover and :focus states the button pops up, eager to be clicked. Default state :hover / :focus
Adobe-like Arrow Headers | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Adobe has some pretty cool header bars for modules on their site. The header bar is divided into left and right sections. The left being an explanatory title and the right being a related link. But let’s get super critical of how they did it. First of all, they use a non-sprited image to do
Examples of Sites where localStorage should or is being used | CSS-Tricks
localStorage is a new JavaScript API in HTML5 that allows us to save data in key/value pairs in a user's browser. It's a little bit like cookies except: Cookies expire and get cleared a lot, localStorage is forever (until explicitly cleared). localStorage isn't sent along in HTTP Requests, you have to ask for it. You can store way more data in localStorage than you can in cookies. The API for loca
Moving Highlight | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. The guys from DOCTYPE told me it was their inspiration for t
Garage Door Style Menu | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo’ betta. A garage door style menu is where an image (the “door”) slides up to reveal something behind it. We’ll do this in two ways, with CSS3, and with jQuery. Then
Adding Stroke To Web Text | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. Fonts on the web are essentially vector-based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pix
IPhone "slide To Unlock" Text In WebKit/CSS3 | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. There are a couple of WebKit specific properties that make giving text a gradient background possible: -webkit-background-clip: text; -webkit-text-fill-color: transparent; Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin’, if we ma
Guidelines For URI Design | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. This is a guest post by Jacob Gillespie who started an interesting thread on Forrst about this topic. I invited him to post it here, to which he graciously accepted. Over the past several years, I have taken an interest in usability and web design. One of the areas that
Understanding Border-image | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article, I explain how the border-image shorthand property work
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
