ウェブデザイン - ページ 25

CSSの前処理 これは、ほとんどのWeb開発者がすでに学んだ、または読んだことのある概念です。開発者がこの普及しているテクノロジを理解できるように、CSSの前処理について詳しく説明しました。しかし、どうですか ポストプロセッサ? これらの比較的新しいツールは、次の点で似ています。 Web開発ワークフローに影響を与える, しかしそれらは作動します CSS開発の反対側 （“役職” 開発）. この記事では、私が紹介したいのですが 後処理の基本, それがどのように動作するのか、なぜあなたがそれを使うのか、そして後処理でCSSゲームを立ち上げるために使えるいくつかのライブラリ/ツールを共有する. 後処理と前処理 の 前処理革命 ときに起こった Sass / LESSが大ヒット. これらのツールを使用すると、開発者はCSS内で変数、ループ、関数、およびミックスインを使用できます。これはほとんど基本的なCSSの開発になります プログラミング言語に似ています 拡張機能付き. 後処理 プレーンなCSSをすでに作成した後に発生します。 さらに拡張する 自動化を通じて。これは含めることができます クラスセレクタの拡張, または 自動追加プレフィックス 特定のCSSプロパティについて....

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. CSSまたはCascading Stylesheetsは、Webのデザインルールの定義言語を完成させます。世界中のアーティストが日常的にCSSを使用して、基本的なWebサイトのレイアウト用のルールセットを作成、整理、およびエンコードしています。これはフロントエンド設計のための最も普及した言語になり、CSS3の最近のリリースで驚くべき能力を提供します。しかし、このコードすべてが実際に何を意味するのか? 言語自体は、ここ数年で完全に開発されました。混乱は、主に誤解と同様の用語の誤用が原因で発生する可能性があります。 CSSはテーブルに多くの新しい概念をもたらします。 CSSの達人として習得するための最も一般的な用語をいくつか取り上げます。. CSSに特化する理由? この問題は以前に提起されており、2011年に入っても同じ結果が出ているのがわかります。 CSSは、スクリプトやプログラミングには適していない堅牢な言語です。これはスタイル言語です。具体的には、Webページの動作を説明するためのコードです。. CSSを使用して、個々のHTML要素から直接属性を操作することができます。すべてのブロック、段落、リンク、および画像はCSSルールによって影響を受ける可能性があります。 Web用のプレゼンテーションセマンティクスを改良することは、常に大きなステップでした。これが、CSSが依然としてデザイナーのトッププレーヤーである主な理由です。! プロパティと値 これはCSSに侵入する最も簡単な方法です。すべてのコードは、デザインを適用する要素と適用する要素を選択するという2つのアクションに分類されます。後者は、プロパティと値のペアによって作成されます。. 例として 赤色; 非常に単純なプロパティと値のペアです。私たちが使用したプロパティは 色 許容できるものを渡すことができます 値 テキストの色を変更します。これは16進コードまたはRGB（赤 -...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. CSS3は次世代のスタイルシート言語です。それは影、アニメーション、トランジション、ボーダー半径などのような多くの新しくてエキサイティングな機能を紹介します。仕様はまだ確定されていませんが、多くのブラウザ製造業者はすでに多くの新機能のサポートを始めています. このチュートリアルでは、次のようないくつかの機能について調べます。 テキスト影, ボーダー半径, 箱影 ロッキング検索フィールドを作成するための遷移. この検索フィールドのフォトショップ版はAlvin Thongによって作成されたもので、ここからダウンロードできます。私は純粋なCSS 3を使ってこの検索フィールドを作り直そうとしました。それは注意することです すべてのブラウザがCSS 3機能をサポートしているわけではありません。 そしてこのチュートリアルを試すために、あなたはCSS 3機能をサポートする最新のブラウザのうちの1つを使うべきです. 準備はいい？始めましょう! 1. HTML5 Doctype HTMLマークアップから始めましょう。後はとても簡単です。 HTML5のDoctypeと 宣言、我々は持っています...

Dribbbleは、WIPプロジェクト、デザイン、モックアップ、さらには景品さえも共有できる、デザイン分野で人気のあるWebサイトです。その見返りに、あなたはあなたのデザインを次のレベルに押し上げるのに良い仲間のデザイナーからのフィードバックと批判を得るでしょう. 自分のポートフォリオの表示方法をカスタマイズしたい場合は、自分のドメインの下にショットを表示できます。それを手助けするために、あなたはDribbboxを試してみることができます. Dribbboxは、Dribbbleショットを自分のドメインの下に表示するのに役立つライブラリです。芸術作品を紹介するためのDribbboxの設定方法を見てみましょう。. Dribbboxのインストール 私はあなたがあなたのドメインとサーバーのセットアップを持っていると仮定します。共有ホスティングはうまく動作するはずです。それ以外の場合は、ローカルサーバーを持っていなければ実行できます。 AMPPSを使ってローカルサーバーを設定する方法についての指示が必要な場合は、こちらを読んでください。. ZIPパッケージをダウンロードして、コンテンツをサーバーにアップロードします。 index.html、config.js、およびassetsフォルダーを含める. 開く config.js Dribbbleからポートフォリオを取得するためのユーザー名を指定します. この場合、デモにはThoriq Firdausのポートフォリオを使用しています。ポートフォリオを取得する方法は次のとおりです。. dribbbox.config = dribbble_username： "tfirdaus"、short_description： "ワールドクラスのデザイナーになりたいです。"、email_address： "[email protected]" 保存してページを更新してください. それは本当に単純ですね。? Dribbboxであなたのポートフォリオ 設定は簡単です。 3列あります。連絡先の詳細は、左端の静的サイドバーにあります。ドリブルショットは中央のスクロール可能な列にあり、右側のビューアでは、プロジェクトを一度に1つずつフルビューで見ることができます。この設定は、一般の人があなたにコメントなどのようなフィードバックをすることができないことを意味するディスプレイとしてのみ完璧です。彼らもあなたの仕事を共有することはできません. Dribbboxは、モバイルデバイスでの表示に最適化されています。 Webサイトがモバイルで表示されると、DOMツリーのレイアウトとHTMLが再構築されます。 mobile.js. ビューポートの幅を指定します。 mobile.js で行われるべきです...

丸みを帯びた角は、Web 2.0設計にとって非常にクールなものです。 RoundPicは、あなたがあなたのイメージの角を丸めるのを助けるサイトです。どちらでもできます 自分の画像をアップロードする または テキストフィールドに画像のURLを入力します。, 次にクリック それを丸める! RoundPicはから選ぶべき12の異なる丸みを帯びた角の半径を提供します、あなたもあなた自身のものを設定することができます 画質, 背景色 そして 画像寸法. クリックするだけ プレビュー あなたが変更を加えるたびに。最後に、ファイル名を変更してダウンロードしてください。それは本当にとても簡単です. これはあなたがオンラインで角を丸くすることができるもう3つの方法です.

Webをaにする大きな推進力があります もっとCSSに優しい場所. 長年, 画像 いつもだった ブラウザハックの解決策 背景の繰り返しから引き戸テクニックまで。しかし今ではこれまで以上に簡単になりました パターン、アイコン、および特殊効果を作成する CSS3で. あり この三角ジェネレータ, あなたは設計することができます 任意の三角形のサイズと形状 ほしい自動的に CSSクラスを書き出す どの要素にも適用できます. オプションパネルでは、三角形の 色と方向 （上下左右）三角形を変更することもできます 幅高さ そしてでさえ台無しに 左/右スキュー あなたが不等辺三角を作るなら. これは私が今まで見た中で最もクールなWebアプリケーションの1つです。それは Designyourcodeでホストされています これは素晴らしいブログ記事と無料のWeb開発ツールでいっぱいのサイトです. そしてのすべての愛好家のために 下位互換性, 含めるオプションがあります。 Microsoft.Chroma...

フロントエンドの開発は、の導入により根本的に改善されました CSSフレックスボックス. これにより、はるかに簡単になります グリッドと列を作成する レスポンシブレイアウトに自然に移行する. 独自のflexboxグリッドを最初からコーディングする代わりに、次のようなツールを使用する方がはるかに簡単です。 グリッドレックス. この無料のオープンソースフレックスボックスライブラリは 超軽量 そして、非常に カスタマイズが簡単. あなたがするのはただ Gridlexスタイルシートを追加する あなたのWebページに そのグリッドクラスを操作する. 内部列はクラスを取ります .コル そしてこれらのすべてを .グリッド 容器。これはすべての列を定義します 同じ幅で そして統一されたインターフェースを作ります. このデフォルト 上書きすることができます 追加して サイジングクラス 各列に。こうすることで、1列を幅70％、別の列を幅30％にすることができます（コンテンツ/サイドバーなど）。. あなたはたくさんのトンを見つけるでしょう グリッドサンプル Gridlexのホームページで...

作成するのが最も難しいフィールドの1つです。 日付/時刻を選択. 開発者は月/日/年の簡単な選択メニューに頼るか、仕事をするために様々なプラグインに頼ります. 選択フィールドはうまく機能しますが、少し不格好です。代わりに、あなたはあなたのフォームを次のようにジャズアップすることができます。 Flatpickrプラグイン. それは 依存関係のない無料のオープンソースJavaScriptカレンダーピッカー. そうだった ミニマリズムを念頭に置いて設計されています, だからそれはあらゆるWebサイトのレイアウト、あらゆるWebフォームに収まることができ、そしてどんな近代的な装置からも使えるはずです. このプラグインの良いところは、 さまざまなカスタムオプション. テキストフィールドの日付の表示方法とカレンダーの開始位置を変更できます（デフォルトは “今日”）. しかし、あなたもできる 厳密に日付ピッカーとして使用する 時間を選択する必要がない場合これは、この1つのピッカーを使ってフォームを介してより多くのデータを渡すことを可能にする単なるオプション機能です. を見てください。 例のページ Flatpickrの動作を見る. あなたもすることができます ターゲットを絞ったオプションを設定する 次のように、日付ピッカーの動作を制限します。 特定の日付/範囲を許可しない 特定の日付/範囲のみを許可する 複数の日付選択を許可する “レンジモード” 開始日と終了日を選択する 日付ピッカーだけ、または時間だけ、または日付と時間の両方を一緒に オプションは事実上無限であり、それらはすべてこの1つのバニラJavaScriptプラグインを通して機能します....