A beautiful extension for TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue, and Angular.
![Tailwind Starter Kit by Creative Tim | Free & Open Source Design System](https://cdn-ak-scissors.b.st-hatena.com/image/square/0112dba098c4853e62991168ed39695f4eb0cf7e/height=288;version=1;width=512/https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Fmaster%2Fcreative-tim%2Fopt_tsp_tailwindcss_thumbnail.jpg)
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0
Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn’t too difficult. Let’s get started! Server side rendering You might have heard p
僕はWebサービスを開発するとき、UIの部分については極力CSSのフレームワークの使っています。フレームワークを用いることで、HTML・CSSの開発速度が大幅にスピードアップします。現在は数多くのフレームワークが公開されており、どれもクオリティが高く、どのフレームワークを選ぶのがベストプラクティスなのか、迷ってしまうことってありますよね。うれしい悲鳴です。 少し前まではBootstrapを愛用していましたが、Semantic UIに出会い、このフレームワークの虜になりました。デザインが洗練されており、種類も豊富なため表現の幅が広がります。 Semantic UIに関する記事は、あまり出回っていない...?ので、Semantic UIで作ったWebサービスを紹介しながら、簡単な使い方などを説明していきます。Semantic UIは本当にいいフレームワークなので、もっと普及してほしいなと思って
The front-end developer comes for the very first time in client's project faces the problem of choosing a Best CSS framework in 2018. You can easily find more than 50 frameworks, each of which is good for something. But which one suits you? In this article we'll guide you through most popular CSS frameworks and concentrate on the main. 2018 year promises the new era and new approach in HTML coding
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention. ClarifyJS With ClarifyJS you can easily create chained methods that can be executed in any order you want. Usually javascript methods are exe
Vue.js では、要素を追加/更新/削除したときのアニメーションを、簡単に実装できるような機能が用意されています。 ありがたいことに、公式のドキュメントにバッチリとまとまっていますが、それを要約しつつパパッと今日から始められるようにと、ライトに端折って紹介します。 📖 Enter/Leave とトランジション一覧 — Vue.js シンプルな実装 Vue が提供しているアニメーション機能は、かなり多機能で美味しい仕様になっていますが、とりあえず一番簡単なアプローチで実装してみます。 ポイント <transition name="your-anim-name"> で、v-if や v-show が指定された要素をラップする name 属性が class 名のプレフィクスになる 挿入(enter)/削除(leave)時のアニメーションの進捗を補足して、それに応じた class を自動で切
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
<div class="square-box"> <div class="content"> <div class="center-box"> <img class="thumb" src="/path/thumbnail.png"> div> div> div> .square-box { position: relative; } .square-box:before { display: block; content: ""; padding-top: 100%; } .square-box .content { position: absolute; top: 0; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; } .thumb { width: 100%; height: auto; }
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考:position - CSS|MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ(最下部に吸い付くフッタ) この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき3つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui (追記)UIkit (追記)Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く