今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
7 Things You Didn't Know You Could Do with CSS
CSS and JavaScript, believe it or not, are starting to overlap as CSS adds more functionality. When I wrote 5 Ways that CSS and JavaScript Interact That You May Not Know About, people were surprised at how CSS and JavaScript have come to overlap. Today I will highlight seven tasks you can accomplish with CSS -- no JavaScript or imagery required! CSS @supports Every good front-end developer featur
12 Little-Known CSS Facts — SitePoint
CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post wil
CSShake
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
The Current Generation of CSS3 Selectors — SitePoint
After CSS 2.1, the W3C added a whole slew of new selectors to help us target elements in unique ways. Just about all of these selectors have excellent browser support, so you can — and probably should — already be using them. If you’re not too familiar with them, this article will give you an overview of these CSS3 selectors, which I’d like to term the ‘current generation’ of CSS selectors. Where
Moonlighting with CSS text-shadow — SitePoint
A great deal of the charm of CSS level 3 (CSS3) comes from the ability of its various features to cut down on background images and Photoshop muscle flexing, allowing us to programmatically create many of our graphic requirements instead. This brings with it many advantages – time saved, less HTTP requests and file weights, and more flexibility to name just a few. Of course, this does come with a
Create CSS3 - Easy CSS3 Generator & SASS Compass CSS3 Generator
Knowing your way around CSS is absolutely necessary if you want to have a half-decent looking website. In a lot of ways, having good CSS fundamentals is the great equalizer - if you know your stuff, your sites will look good, regardless of whether you're a freelancer or a bigger agency. Think about it this way: You could be one of the best SEO agencies in the world, but if the sites you're ranking
CSS3アニメーションを利用したサンプル
CSS3アニメーションを利用したサンプル CSS Niteビギナーズ：HTML5+CSS3でCSS3アニメーションを紹介したところ、使いどころがよく分からないとの意見をたくさん頂いたので、サンプルをいくつかご紹介します。 実際の動作はサンプルページから確認できます。 sample1 ボタンにマウスをのせた際にアニメーションして背景色を切り替えます。 /*sample1*/ .sample1 a{ background:#3f8bad; text-decoration:none; padding:1em; color:white; -webkit-transition:all 400ms; -moz-transition:all 400ms; -ms-transition:all 400ms; -o-transition:all 400ms; transition:all 400ms; }
Squishy Toggle Buttons
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
12 Free And Amazing CSS3 Image Hover Effects For Downloads » SmashingApps.com
by AQ Nizam · November 8, 2012 12 Free And Amazing CSS3 Image Hover Effects For Downloads In this round up, you will discover some cool and amazing CSS3 image hover effects that you can download for free. By using these image hover effects, you can make your web design look more interactive and visually appealing. These effects are created with the help of CSS3 that has made creating appealing vis
Flexplorer
Well this is embarrassing... You're currently on a web browser that does not support the most recent version of the CSS Flexible Box Model. Upgrade your browser and have a nice day! Supports latest version of Flexbox unprefixed: Safari 7+ Internet Explorer 11 Chrome 29+ Opera 12.1 Supports latest version of Flexbox prefixed: Safari 6.1+ prefixed Chrome 21+ Support for latest vesion of Flexbox comi
Basic Ready-to-Use CSS Styles
.drop-shadow.top { box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4); } .drop-shadow.right { box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); } .drop-shadow.bottom { box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); } .drop-shadow.left { box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4); }
cssFx by imsky
cssFx adds vendor-specific prefixes to your stylesheets. How it works When the document has finished loading, internal (<style>) and external (<link>) stylesheets are processed, fetching any @import stylesheets as well. It's recommended to bundle stylesheets into one file to minimize request overhead. Once processing is done, a new <style> tag is appended to the <head> with processed properties. P
eleqtriq- Tweaking Bytes In Red, Blue & Green
Liquify everything! 09/07/2021 A new article on smashing magazine, where I dive into the wonderful world of visual effects that can be achieved with displacement maps. SVG Partial Blur and iOS Style Translucency 11/29/2015 It's one of the lesser known features of SVG filters that they can be masked. Here's how to apply a partial blur to images and SVG elements. This way it's possible to create som
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Cicada Principle and Why It Matters to Web Designers » HTML & CSS, Layout » Design Festival
Buttons Builder
The Good Man
