pirosikickのブックマーク - はてなブックマーク

Sticky Footer, Five Ways | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom

pirosikick 2016/05/26

リンク

Fun with line-height! | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4;) so that it is proportional to the font-size. It’s a vital property for typographic control. Too low and lines are awkwardly squished togethe

pirosikick 2015/01/27

css

リンク

Shape Blobbing in CSS | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. We just covered shape morphing in SVG, where shapes change from one to another. Let’s look at shapes that blob into each other! You know, that gooey squishy blobby effect like droplets of mercury on a surface. I’m not sure who first discovered this was possible on the web, b

pirosikick 2014/11/04

リンク

A Guide to SVG Animations (SMIL) | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it’s features. The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck

pirosikick 2014/10/23

SVG

リンク

Glitch Effect on Text / Images / SVG | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It’s bonafi

pirosikick 2014/09/16

かっこいい！！

css
svg

リンク

Centering in CSS: A Complete Guide | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach fo

pirosikick 2014/09/03

cssでセンタリングする時の事例集

CSS

リンク

Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are usi

pirosikick 2014/04/23

ブラウザサポート以外、SVGの勝ちとのこと

SVG
icon

リンク

Sass Style Guide | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I’ve been gravitating toward. Perhaps they are useful to you or hel