Logic in CSS Media Queries (If / Else / And / Or / Not) | CSS-Tricks
Just in case you have brain farts about the logic in CSS media queries about this constantly, as I do. If That’s what media queries are: logical if statements. “If” these things are true about the browser, use the CSS inside. /* IF the viewport is 550px or smaller, do this */ @media (max-width: 550px) { html { background: hsl(0 0% 0% / 0.5); } } Media Queries Level 4 allows for a comparison syntax
The Big List Of Flat Icons & Icon Fonts | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Icon fonts are awesome. Other than the fact that they have to be single color, they are superior to using images as icons in every way. But which do you choose? There are loads of different sets out there. I’m going to attempt to round them all up here and keep this updated (this post has al
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
Get Value Of CSS Rotation Through JavaScript | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! A comment by aditya: Is there a way to get the angle [through JavaScript] by which the element is rotated? Seems like a reasonable request. So we have some HTML: <div id="i-am-rotated">text</div> And it’s rotated through CSS: #i-am-rotated { -webkit-transform: rotate(30deg); -moz-transform:
Open A Window With Full Size Unscaled Image | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! For the gallery section of this site, I wanted people to have the ability to see the screenshot at its original size. Due to the fluid nature of this site, it’s fairly common for the screenshot to be scaled down to fit into its column. So I put together this little solution. My plan is to op
Persistent Headers | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you’ve scrolled past that relevant section. Header… persisting. Couple things to know before we get started: There are many like it, but thi
Useful :nth-child Recipes | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have! In these simple “recipes” (really: expressions) I’ll arbitrarily use a flat list of list items and randomly
Better Password Inputs, IPhone Style | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Recently renowned usability expert Jakob Nielsen wrote an article Stop Password Masking in which he claims that hiding users passwords as they input them is bad practice. What he is referring to is the default browser behavior of <input type=password … /> elements, where text entered into th
IE 6 Blocker Script | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Fed up with supporting IE 6? Ready to just cut it off? I don’t blame you. I generally feel that most problems people have with IE 6 are pretty easy to work around with practice, but that is not always the case, and I feel like the JavaScript support is even more problematic for developers. M
Toolbox�CSS - CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Over on Tutorial Blog, I shared my “Toolbox CSS” that I like to use: What is Toolbox CSS? Toolbox CSS is styling information that has nothing uniquely to do with any particular website. These are a collection of common styles that can be useful on any web project. How many times have you wri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simple Styles for <hr>'s