Autoprefixer: A Postprocessor For Dealing With Vendor Prefixes In The Best Possible Way | CSS-Tricks
Creating a 3D Cube Image Gallery | CSS-Tricks
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 explain these concepts through a demo. I recently redesigned my website and came up with a 2-face 3D cube idea for the homepage and he
Rundown of Handling Flexible Media | CSS-Tricks
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. Text can be resized and will flow nicely to fill a container. That’s not too hard. But media – images, video players, and audio pl
CSS Style Guides | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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, indentation, overall
The Difference Between 'return False;' And 'e.preventDefault();' | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 clicked but not actually go
Crafting Minimal Circular 3D Buttons With CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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: View Demo Download Fil
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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 semantic
Sass Vs. Less | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! “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
Fighting The Space Between Inline Block Elements | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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: <na
Burst Title | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 screens that I thought wo
YouTube Popup Buttons | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 state :active state I
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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 the navigation on their
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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 pixel data. Because they
IPhone "slide To Unlock" Text In WebKit/CSS3 | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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’, i
Guidelines For URI Design | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 seems to be often ove
Understanding Border-image | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 works in today’s browsers.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
