サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.impressivewebs.com
There are two things here that you’re probably already aware of. First, HTML includes an <output> element that allows you to display the “result of a calculation”. It’s a form element and it’s been around for some time, having been added in HTML5. The other thing you’re likely to be aware of is that the for attribute is normally used on the <label> element to associate a <label> with a form elemen
Unless you’re an absolute beginner to front-end coding, then you’ve probably heard of npm. And npm for beginners is a subject you’re looking into. Maybe you’ve clicked through to the GitHub repo of a tool of some kind. You then noticed the installation instructions had a couple of different possibilities, including something like this: npm install some-tool In addition to that, there’s usually som
A tiny (<1kb), cross-browser, modal window that displays shortcut keys for your app when the user presses the ? key – similar to what happens on Twitter, Gmail, GitHub, etc. This is an example page. Press the ? key to see the modal. More info: GitHub repo and the blog post. Made by Louis Lazaris. Use it for whatever you want.
In addition to the unique property/value pairs that CSS offers, there are also a small handful of language-wide features that can come in handy, including a few that are brand new in the spec. These often go unnoticed, especially by beginners, because when CSS properties and their possible values are discussed (in tutorials, books, or even in the spec), these features are usually omitted for brevi
Most developers nowadays are recognizing that if you’re developing large applications that have different views and states, it is best to take a modular or object-oriented approach to your CSS development. When you throw media queries into the mix, however, the you can lose some of the benefits of modularity — code that’s easy to read, update, and maintain. Let’s look at different ways we can writ
By Louis Lazaris / December 10, 2012 / 8 Comments Updated: August 7, 2022 Most of us know that with the introduction of what we customarily call “CSS3”1, there have been changes and additions to CSS, compared to what we had in CSS2.1. Putting all cross-browser issues aside, I thought it would be nice to be able to document all these changes into a single post and keep it up to date. So if you want
By Louis Lazaris / November 21, 2012 / 70 Comments Updated: August 7, 2022 Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes, and other IE-specific hacks. But without conditional comments in IE10
By Louis Lazaris / November 13, 2012 / 14 Comments Updated: August 7, 2022 In most cases, when you place an element on the page in your markup, if you don’t specify any special styles, it will occupy exactly the same space that it appears to occupy visually. In other words, if you place a box sized at 200px by 200px on your page, anything you place after it in the source order, with no further sty
Back in July I wrote a post called JavaScript String Methods Reference, outlining many of the ways strings can be manipulated in JavaScript. Another area where JavaScript has a number of different methods available for use is Array manipulation, which I’ll cover in this JavaScript array methods reference. As usual, I’ll do my best to keep it simple and accurate, but if I’ve erred or if you think I
Parallax scrolling sites have been a pretty hot UX thing of late, being showcased on various blogs. Although the “ooooh! aahhh!”-ness of it all has subsided, I think this type of site is certainly a legitimate design and development option for many brands. To help you choose a JavaScript or jQuery library or plugin for doing this sort of thing (unless you’re a masochist and want to write one from
By Louis Lazaris / September 4, 2012 / 8 Comments Updated: August 7, 2022 The upcoming IE10 will continue to have strong support for a number of CSS3 features and HTML5 APIs. But if you haven’t yet heard, many of these features will be supported in IE10 unprefixed. These include: Radial Gradients Linear Gradients Keyframe Animations Transitions Transforms font-feature-settings IndexedDB requestAni
About a week or so ago, I stumbled across the Startups, This Is How Design Works website. It’s a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style. I thought it was kinda cool, so I wrote my own script to create this functionality, and I turned it into a jQuery plugin. Use the button below to view the demo, and read on for
Creating pure CSS tooltips with no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from. For a recent project, I had to research the concept of CSS tooltips and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions avail
I recently looked into some options for building a slideshow presentation for display in the browser. While there are options like SlideShare and Speaker Deck that let you upload your slides in PowerPoint or PDF format to convert them to online slides, there are also a ton of options for libraries, toolkits, and APIs that let you create your own non-Flash, full screen, responsive presentations. Us
Every programming language has its good parts and its ugly parts. CSS (I know, it’s not a programming language, but whatevs) is no different. In this post, I do nothing but vent. I’ve been coding websites for almost 12 years, and I’ve been doing CSS layouts for nearly half that (yeah, I was a late bloomer). I’ve come to realize what is good and bad about CSS, and here are what I consider “the bad
By Louis Lazaris / February 28, 2012 / 7 Comments Updated: August 7, 2022 Now that the numbers for IE6 and IE7 usage are diminishing rapidly, more and more development teams are starting to weed out support for those older browsers. Most readers will probably have removed IE6 completely from the equation and soon IE7 will follow. Despite IE8 still having the highest share of any single browser ver
On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed. It seemed like a simple task. After doing
“Vertical-align isn’t working!” cried the web developer. The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times. In this post, I’ll try to cover it in an understandable manner. What it Does Not Do The common misconception about vertical
By Louis Lazaris / November 16, 2011 / 46 Comments Updated: August 7, 2022 Update: (May 7, 2013) There are now two specifications that make this sort of thing possible with CSS: Filters and Compositing and Blending. The other day Paul Irish posted an article that collected together responses to a question that he and Yehuda Katz asked their Twitter followers. One of the wish list items a few peopl
By Louis Lazaris / November 14, 2011 / 37 Comments Updated: August 7, 2022 This is a question that has been answered in a number of different places. Unfortunately, the answers in some instances have not been good ones. In fact, they’ve either been way too optimistic and/or presumptuous — or else just downright wrong. Also, when we use the term “HTML5”, what exactly are we referring to? HTML5 cove
Most good developers by now accept the fact that pixel-perfect cross-browser CSS is not only unnecessary, but also totally impossible. Of course, when we speak of the challenge of “cross-browser” CSS, we’re really saying “How can I make this work in Internet Explorer versions 6-8?” — because those are really the most problematic browsers. Although I’ve written before about cross-browser CSS, and I
Maybe there’s a technical term that I’m not aware of for this type of centered line-splitting heading. Whatever it’s called, I’ve used it in a project’s footer in the past, where I’ve divided the footer into sections with headers that look something like this: I wanted to create such headings but with certain rules and restrictions: No images No extra HTML Scalable (that is, you could add larger t
By Louis Lazaris / September 21, 2011 / 29 Comments Updated: August 7, 2022 You’ve probably used CSS’s border property often, and in almost all cases you’ve probably set the border-style value to “solid”, which looks exactly the same in every browser. We all know there are other values for border-style, but it’s likely you’ve never used any of them. You may have used a value of “dashed” or “dotted
Let’s have some fun with CSS selectors, properties, and values. All the rule sets shown here contain valid CSS that represent things in real life. This has also been later referred to as “CSS puns”, which is not really a correct way to describe it, but for the record I was the first one to come up with this. A few sensitive subjects represented here, but they’re not meant to cause offence. Just so
CSS3 Keyframe Animations Demo This page is a demo that copies some of the animated elements from 84Colors. The original site uses Flash animation for these effects. I've recreated them using CSS3 animations. For an introduction to CSS3 keyframe animations, see my article on Smashing Magazine or this screencast by Chris Coyier. This demo works best in Chrome 4+, Safari 4+, and Firefox 5+. < Go Back
I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 84Colors, which belongs to a freelance designer named Cristiana Bardeanu. On that site, you’ll notice there are a number of subtle animations that integrate nicely with her overall brand and design. Her animations
If you’ve seen the code for CSS border images then you’re probably familiar with the space and round values for the border-image-repeat property. Well, in the CSS spec, the well-known background-repeat property now includes those same two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat — all of which most CSS developers will be thoroughly familiar with). To demonstrate what th
A short time ago I wrote an article that broke down the syntax for coding CSS3 linear gradients from scratch. Once you get the hang of them, linear gradients are pretty simple to code. Radial gradients, on the other hand, are a little more complex. So let’s finish off what I started in that earlier post and go through the syntax for radial gradients. The Complete Syntax First things first — for th
Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class. Here’s a typical transition that changes link color on mouseover using pure CSS: a, a:link, a:visited { color: lightblue; transition: color .4s linear; } a:hover { color: white; } This will animate the color property when you hover over a link on the page. Pretty simple,
次のページ
このページを最初にブックマークしてみませんか？
『Impressive Webs』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
