umbrUI - CSS3 checkbox
Pictos enabled CSS3 checkboxes There was a request, so I tried. The outcome.. no JavaScript, no images and just minimal markup - but a ton of messy CSS3. And only Safari will render it properly. Chrome looks ok, but just with a fake 3D perspective. iOS has some issues with the icons and Firefox, Opera and IE.. well, I haven't tried yet. Read more details or see a screenshot. PS: If you're curious
Thematic WordPress Theme Toolbox: 10 extremely useful hooks
When building a website, using a CSS framework is a real time saver as it provides you with tools every web designer and front-end developer needs when crafting a site (other than good web hosting). A CSS framework is a software framework created to allow for easier, more standards-compliant web design using HTML/CSS. Many popular CSS frameworks are design-oriented and contain elements that can be
safari4 betaで実装されたCSS Animationを使ってみました。
こんにちは。橋本です。 さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。（今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください） CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。 まずこちらをご覧ください。 Falling Leaves ‘Using CSS Animations and Transforms これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。 では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。 まず、以下のように、キーフレームを定義します。 キーフレームの定義は、「@-webkit
CSS3 Media Queries - Web Designer Wall
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful becaus
BonBon Buttons - Sweet CSS3 buttons
Button Search Stars Home Play Share Love Quit Upload RSS There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store. Markup I get a real kick out of trying to keep the markup minimal, so I'm really
Our Solar System in CSS3 | neography
This is an attempt to recreate our solar system using CSS3 features such as border-radius, transforms and animations. The result is surprising and quite interesting. These past few months I’ve been exploring CSS3, trying to learn some of it’s new features and getting a feel for which browsers support it. A few weeks back I put out my first experiment exploring @font-face and transforms. This time,
CSS3 loading spinners without images | Kilian Valkhof
While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone. CSS transformsCSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, ch
Awesome Bubble Navigation with jQuery | Codrops
In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. Ok, so let’s get started. The Markup The HTML will consist of a main div that we will give the class navigation and the id nav. Inside of the main div we will have the na
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 <link rel
jQuery Circulate
Prereqs Requires the jQuery Library as well as the Easing plugin. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type='text/javascript' src='js/jquery.easing.1.2.js'></script> <script type='text/javascript' src='js/jquery.circulate.js'></script> Usage / Options / Defaults $("#anything).circulate({ speed: 400, // Speed of each qu
Web Design Articles (CSS Layouts, Experiments & Demos)
I've been working professionally as a web developer for over two decades and running this website since 1997. I am keenly interested in responsive layouts and their underlying HTML and CSS. My web development work history My web design portfolio Responsive Columns: Build Amazing Layouts With Custom HTML Tags Responsive Attributes: Generate CSS Grid Layouts With Simple HTML Responsive Font Size (Op
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
Panoramic Photoviewer in Javascript - Gaya Design
PRESS RELEASE You might of seen my work around the web. When My Direct Blinds contacted me back in late 2015 with an irresistible offer to help build out their digital assets and join the company with an ownership stake, it was an offer I could not refuse. Web design, interior design and window furnishings shared a common ground and something I could get behind. Thus, the decision was made to end
[CSS]あなたのウェブデザインに繊細を加える珠玉のスタイルシート
繊細のポイントは「気がつくかな？」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。 Take Advantage of CSS3 to Achieve Subtle Design デモページ 下記は各ポイントを意訳したものです。 はじめに 繊細の大事なポイントは人々が気づかないかもしれない、そして記憶に残らないくらい非常にささやかなものにすることです。 私はこれが初耳だという人がいることを疑います。これは感覚と認識研究によって述べられたよく知られている概念の一つです。 繊細なデザインが難しいのは、「もう少し多くした方がいいのかな？」と容易に思えてしまうところです。このことを知らないと、繊細は失われるでしょう。 以上を踏まえた上で、ウェブデザインにさまざまな形の繊細を提供するために使用できる三つのCSS3のテクニックを紹介します。 1. transi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/html5-template.html