Detect the End of CSS Animations and Transitions with JavaScript
CSS allows you to create animations with transitions and keyframes that once were only possible with JavaScript or Flash. Unfortunately, with CSS there’s no way to perform a callback when an animation is complete. With JavaScript, it’s possible to detect the end of a CSS transition or animation and then trigger a function. Separate the roles Handle the animations (with transitions or keyframes) in
[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ
TL;DR 前回（あのサイトでさりげなく使われていた CSS 小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。 インタラクティブ １．マウスオーバーで自動スクロールさせる 最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。 html <div class="box-fixed"> <div class="field-wrap"> <div class="field-detail"></div> </di
![[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fee8f1468dfd9f1f2b34b6da4ca43e4f44c4df/height=288;version=1;width=512/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fai_css_interactive_trends.png)
Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
CSS and jQuery Vertical Fixed Navigation | CodyHouse
Vertical Fixed Navigation A side navigation which allows users to easily browse the page, selecting one of its sections and smoothly scrolling to it. It doesn't necessarily replace the main website navigation, but comes in handy for pages packed with content. If your website pages have lots of content, users can have a hard time finding exactly what they are looking for. This vertical navigation p
CSS and jQuery Side shopping cart | CodyHouse
Side Shopping Cart This animated side cart is a smart and not obtrusive way to let users jump in and out from the list of products they want to buy, without having to refresh the page or fire a popup. CSS3 could lead to an inflation of animations and transitions. Sometimes though, this power can be used for a noble intent: a side cart, just a click away from the user, is something smart. A good ex
Making a SVG HTML Burger Button | Raygun Blog
Making a SVG HTML Burger Button By Kyle Henwood | Posted Jul 4, 2014 | 3 min. (464 words) Note: Works in Safari, Chrome, Firefox. See the pen by Kyle Henwood on CodePen. Hamburger buttons are used to symbolify hidden menus all across the world, but when I came across this pretty awesome transition of a hamburger button by CreativeDash, I challenged myself with recreating it HTML. First thoughts Ha
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
100 Tiny CSS Tools & Apps for Web Designers
Each of these free web-based tools and apps have been built by web designers for web designers. They all offer a time-saving solution to some of those monotonous or even complex CSS tasks you may need to perform from time to time. Without needing to install anything, all you have to do is bookmark, and save them for that day when required. From assessing your website’s accessibility to generating
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
Playing with CSS3 Animations - Designmodo
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Free Email BuilderFree Email Templates /* Percentage */ @keyframes moveTop { 0% { top: 0px; } 100% { top: 100px; } } /* From -> To */ @keyframes moveTop { from { top: 0px; } to { top: 100px; } }
Simptip - 要チェック！スタイルシートだけで実現するツールチップ MOONGIFT
スタイルシートだけで実現しますよ！ 訪問者向けにちょっとしたヘルプを出したい時に使えるのがツールチップです。しかし表示する際にJavaScriptを組み込んだり複雑な指定をしないといけないのでは使い勝手が悪いですよね。 そこで使ってみて欲しいのがSimptipになります。CSSを読み込むだけで使えてしまうツールチップです。 使い方は簡単で、Simptipを読み込むだけです。 <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> これで準備は完了です。例えば文字列の上にツールチップを出す場合、次のように指定します。 <span class="simptip-position-top" data-tooltip="I'm in top">position top</span> 実際の表示は次のようになります。 表示例
Stopwatch in CSS - CSS3だけで実装されたストップウォッチ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました おお、これは凄いぞ！ 今のWebサービスでは何となくJavaScriptを多用してしまう雰囲気があります。ユーザ操作による処理を行うとなるとすぐにJavaScriptに頼ってしまいます。 しかしそれではセキュリティ上などでJavaScriptをオフにしていると動作しないものになってしまいます。そんな簡単に動かなくなるシステムではダメです。ということでスタイルシートを駆使してどこまでできるのかチャレンジしてみるのは決して損にはならないはずです。 今回はCSS3だけでストップウォッチを実装してしまったStopwatch in CSSを紹介します。 数字の下にある開始、一時停止、ストップはちゃんと動作します。なお1秒以下の単位は止めることができないようです。 タネは以下のスタイルシート設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page is Under Review
Loaders.css
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
The Gift of Giving Advent Calendar - Market Blog
Experiments | CodyHouse
Progress Button Styles
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
