How SVG Line Animation Works | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I bet all of you have seen that little trick where an SVG path is animated to look like it’s drawing itself. It’s super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used
Body Border, Rounded Inside | CSS-Tricks
Reader Arun wrote in with a question on how to make a body border that was rounded where the edges met on the inside. Like this. We’ve covered body borders before, but this was slightly different. It does look rather confusing at first. You can’t do bizarro inside-y rounded-ness like with CSS, that’s crazy talk. But then, if you just look at it as a normal rounded corner element sitting on top of
Poll Results: Hyphens, Underscores, or camelCase? | CSS-Tricks
My intention with this poll was to be kinda vague, so that people would respond about what they like the best instead of thinking of one particular instance of usage. Usage could be where ever you need to manually name something: CSS classes and ID’s, programming function names, file names, usernames and passwords, basically anywhere you can’t use, but benefit from simulating, spaces. Turns out th
How nth-child Works | CSS-Tricks
Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS There is a CSS selector, really a pseudo-selector, called :nth-child. Here is an example of using it: ul li:nth-child(3n+3) { color: #ccc; } What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that wo
Silhouette Fadeins | CSS-Tricks
Some friends of mine’s band recently went through a small member lineup change. They needed to replace the photo on their homepage. I thought it might be fun to do something slightly interactive there. We went with silhouettes of the band members, which fade into real photographs upon rollover. There are probably quite a few ways to do this… This one just popped into my head and I went with it. Th
Quickie CSS3 Tricks with Fallbacks | CSS-Tricks
CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. L
Date Display Technique with Sprites | CSS-Tricks
LearningjQuery.com has a pretty cool presentation of the dates of their blog posts. Check it: The typeface and the year being vertical should tip you off right away that images are being used to accomplish this. But also note that the date information is presented as text, as it should be, in the markup: A quick peak in Firebug reveals the beautiful simplicity! Sprites at Their Best Hopefully it’s
The CSS Overflow Property | CSS-Tricks
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don’t set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a
The CSS Box Model | CSS-Tricks
At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We’ve talked about the positioning of these boxes a bit, and about their behavior. What we haven’t talked about much is the box itself. How is the size of the box calculated
Inappropriate Uses | CSS-Tricks
Those are the appropriate uses for these technologies. Inappropriate use is when you cross those lines and create a mismatch. Inappropriate database use You store the title of a blog post as the value: <h1>10 things to not bring with you skydiving</h1> It is inappropriate to store the HTML tag with the title. it’s inflexible later on and has nothing to do with the content itself. What if it was de
Text Blocks Over Image | CSS-Tricks
Someone recently asked me about this technique and my first reaction was that it was probably a little too mundane to cover as a tutorial. But then I got to thinking that there is actually a few interesting things happening here and the style is trendy enough people might be interested. The idea is just to overlay some text over an image, but as blocks that stick out from the left with an even amo
New Screencast: jQuery Part 3 – Image Title Plugin | CSS-Tricks
This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case, it helps keep our code as semantic as it canThis video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case, it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover the syntax of creating a plu
AnythingSlider jQuery Plugin | CSS-Tricks
Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features. Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider“, and “moving boxes“. Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case
All About Floats | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! What is “Float”? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of
The "Light" CMS Trend | CSS-Tricks
CMSs are beautiful things. Just as CSS allows us to abstract the design away from the markup, a CMS allows us to use a database to abstract the content away from the markup. There are a zillion of them, each with different backend UI’s and different ways to doing things. But CMSs are for web people. Even my beloved WordPress can be challenging to train/explain to someone who has no experience work
What's The Best Way To Handle Page Titles? | CSS-Tricks
First-level Navigation Or, “the homepage”. Here are some possibilities: [ NAME OF SITE ] Short and to the point Ex. CSS-Tricks [ NAME OF SITE ] – Short Tagline Taking the opportunity to explain the site Ex. CSS-Tricks – A Web Design Community [ NAME OF SITE ] – Keywords Site titles are SEO Opportunities Ex. CSS-Tricks – Web Design, jQuery, Downloads, Screencasts, Forums Other? Second-level Navigat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://css-tricks.com/examples/CleanCode/Beautiful-HTML.png
So Your Client Says They Want To Get On Twitter... | CSS-Tricks
Videos | CSS-Tricks
Web Nerd Terminology (Explained) | CSS-Tricks
