Single HTML Element CSS3 iPhone 5
CSS3 Single HTML Element iPhone 5 Tweet View The Article Design by Matt Boldt This was made with pure CSS and only a single HTML element. Did you like this? Tell me about it. Follow my personal Twitter here. You can find me on Forrst.com, and I also put this on CodePen. A little about me: I'm a 19 year old web developer / designer from Texas. I work for Macroplant. We make really cool apps for use
Replace The Image In An <img> With CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Marcel Shields. Marcel was in a difficult place where he needed to change the image on a page but didn’t have access to the HTML. Rare, but I’m sure we’ve all be in weird situations like this. He explains how he managed to replace that image without needing t
Transitional Interfaces, Coded | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Pasquale D’Silva’s article Transitional Interfaces has really been making the rounds. It’s a quick read that drives home a great point. Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a page. If a list item is inserted in
Single Element Pure CSS3 Double Fold Ribbon
Description Ribbons are an extremely popular design element. This is a simple experiment to create a 3D double fold ribbon using just one HTML element. The ribbon design is made using 4 CSS3 gradients combined together and the complex folds of the ribbon is emulated using a clever combination of pseudo elements, box shadow and borders. You can edit the text of the ribbon which will change its widt
CSS Pie Timer | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Editor’s Note: Kitty Giraudel made a cool demo for a “pie timer” on CodePen. It’s definitely not an intuitive or simple thing to do in CSS. Then they sent me a write up on how they did it and I’ll be darned if it doesn’t make a real nice CSS-Tricks article. Thanks Kitty! What are we making?
Mastering CSS3 Multiple Backgrounds - DZone Web Dev
Our journey to the world of CSS3 shadows continues. Today we will focus on another interesting feature—how to use multiple backgrounds with CSS3. Backgrounds CompositionThere are many reasons why you may need to create a composition of multiple images to build your background. I think the most important are the following: to reduce bandwidth usage where the sum of the file sizes of separate images
Pure CSS3 Bitmap Graphics
Everything here is rendered with CSS: no images, no canvas, no data URIs and no extra markup. The piCSSelz (see what I did there) are drawn with CSS gradients sized precisely to pixel boundaries. There are certainly more practical uses for this technique, but none quite as nostalgic. Stay tuned for more examples, wider support and a code generator!
The amazing powers of CSS | Articles | web.dev
The amazing powers of CSS Stay organized with collections Save and categorize content based on your preferences. Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible: a[href = ""] { background: red; color: white; font-size: x-large; } Check out the live example at jsFiddle You can also style absolute links dif
CSS3 Family Tree
Nick Not bad, excellent use of code. Problem is if you wanted to use it as a family tree, you would have to find someway to show marriages, and possible other data. Still it is an excellent start to what could be a very useful library/resource. roberto and works for a small family tree, when you use this code for more than 4 childs doesn’t work. but this is really useful and beauty, thanks a lot.
CSS drop-shadows without images – Nicolas Gallagher
Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. Divya
dolody.com - Domain Name For Sale | Dan.com
Buyer Protection Program When you buy a domain name at Dan.com, you’re automatically covered by our unique Buyer Protection Program. Read more about how we keep you safe on our Trust and Security page. Next to our secure domain ownership transfer process, we strictly monitor all transactions. If anything looks weird, we take immediate action. And if the seller doesn't deliver on their part of the
javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？
CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm Chrome / Safariの最新版で動きます。Firefox / IEだと動きません。 ソースコード https://github.com/ndruger/css-game 技術的な説明 アニメーションはCSS Animationを使うだけなので簡単ですが、問題は状態管理です。 アクションゲームを作るには、基本的に下記の要素が必要です。 1. ユーザー入力に対する状態の変更 2. 状態の保持 3. 状態に応じて見た目
[CSS]CSS3アニメーションを使ったスタイルシートのテクニックのまとめ
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。
25 Helpful CSS3 Tutorials and Techniques - blueblots.com
CSS (Cascading Style Sheet) is a style sheet language used by website developers in creating website styles and layouts. Up to present, CSS continues to prove its worth and usefulness in web development. Today, CSS3 gives you wonderful new features which are mostly compatible for cross browser usability and may give web development a new look. These features include new options for border styles,
CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started — Smashing Magazine
Offering a range of new features that help us break free of the float, the flexbox model is another step forward for the layout of modern Web pages and applications. By experimenting with these new techniques now, you can actively contribute to its development. The flexible box layout module — or “flexbox,” to use its popular nickname — is an interesting part of the W3C Working Draft. The flexbox
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
Pure CSS3 Paper Curls Without Images
No images or additional elements are used to create this curled box effect. For more information, please please refer to: Pure CSS3 Paper Curls Without Images No Restrictions This example code was developed by Craig Buckler of OptimalWorks.net for SitePoint.com. It can be used without any restrictions but please don't expect 24/7 support! A link back to SitePoint.com is appreciated.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fancy CSS3 Tooltips without any JavaScript
Blurred Text
http://www.themeflash.com/40-brilliant-css3-techniques-and-tutorials/