タグ付けされた質問 「css」

ウェブ開発者として、フロントエンドとバックエンドの両方のアーキテクトとして、私は多くの異なるデザイナーと仕事をしており、基本的なCSSとHTMLでデザインを達成する方法が考慮されていなかったデザインコンプでの作業にイライラすることがあります。一方、開発者として、私はあらゆるデザインからコードを生成できると期待されています。 Webデザイナーは、基本的な最新のCSSおよびHTMLテクニックを知っている必要がありますか？丸みのあるWebデザイナーにとってこれが重要なのはなぜですか？ 一般的な考え： フロントエンドのWeb開発者は、設計をコーディングするのに十分なスキルを備えている必要があります。 Webデザイナーは、ユーザーが実際にデザインと対話する方法を理解する必要があります。 デザインショップでは、むしろデザイナーに設計を依頼し、すべてのコーディングを開発者に任せます。

31 website-design  css  designers 

私はここに来て、次の点を改善する方法についての設計の助けやアドバイスを少し求めています。 タイトルが示すように、背景として異なる画像に表示される複数のテキストを含むウェブサイトのバナーを持っています。さて、ほとんどの画像は暗いので、フォントの色を白に設定しました。しかし、それでも、テキストの一部は次のようないくつかの画像ではあまり読めません： CSSを使用しているため、次のようなさまざまなオプションを試しました。 テキストシャドウの追加： CSS： text-shadow: 3px 3px 0px #000; また、テキストの周りに半透明のボックスを作成してみました： デモ 箱が不自然に見えるように感じます。 CSSを知っている人のためにフィドルを作成しました。そうでない場合は、あなたの想像力だけに基づいて私にアドバイスしてください。 PS：それがより際立って役立つ場合は、別のフォントを使用することもアドバイスできます。

30 website-design  color  text  images  css 

Inkscapeを使用してカスタムFacebookアイコンを作成し、svgとして保存しました。これは、ページのタイトルと同じフォントを使用し、CSSファイルで.woffとして参照した「ubuntutitling-bold-webfont」フォントを使用します。タイトルは機能しますが、svgは機能しません。 "f"が何らかのデフォルトフォントで表示されます。フォントファイルは、CSSおよび画像ファイルとの相対関係では../fonts/ubuntutitling-bold-webfont.woffにあり、Webページとの相対関係ではfonts / ubuntutitling-bold-webfont.woffにあります。 私は泉、私はSVGにGoogleウェブフォントを埋め込むにはどうすればよいですか？、しかし、必要に応じてコードをSVGに適用する方法について少し混乱しています。SVGは、CSSファイルで参照されている.woffフォントを使用できますか？SVGファイル内のフォントを手動で変更した方法は正しいですか？ SVGのコードは次のとおりです。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="80" height="80" id="svg2" version="1.1" inkscape:version="0.48.3.1 r9886" sodipodi:docname="New document 1"> <defs id="defs4" /> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1" inkscape:cx="26.573808" inkscape:cy="42.478414" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" fit-margin-top="0" …

28 css  svg  web-fonts 

Illustratorでいくつかのイラストを作成しており、現在作業中のWebサイト用にアニメーション化する予定です。Flashを使用したCreate.jsツールキットについて聞いたことがありますが、より良い」それを行う方法？ 私が目指しているアニメーションの種類の例を次に示します。http : //kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/

27 website-design  css  animation  illustration  adobe-flash 

これは、開発よりも設計に関するものです。 完全に手書きのCSSとHTMLを使用して、ゼロからサイトを構築します。 BootstrapやHTML5 Boilerplateなどのプリビルドcssテンプレートについては、しばらく前から知っています。私は過去にそれらを簡単に見てきましたが、実際にそれらを何かに使用することはありませんでした。CSSをリセットしたり、必要に応じてJavaScriptを含めたり、ビューポートを設定したりしても問題はありません。 今晩、基本的なHTML5 / CSSページをコーディングしました。レイアウトの点で本当に驚異的なものはありません。単にジャンプオフポイント。その後、Bootstrapに同じレイアウトの渦巻きを付けることにしました。かなり標準的な960ピクセル、ヒーロー画像ページを含む3列です。 Bootstrapを変更していると、自分の時間の80％以上がどのクラスまたはIDが何かに適用されるかを学習し、それをCSSで見つけて調整することに費やされていることがわかりました。Bootstrapが私をまったく救うつもりはないことが明らかになりました。実際、Bootstrapは、*過度にテンプレート化されたCSSにより、制作時間を大幅に増加させます。 *（「過度にテンプレート化された」とは、特定のWebサイトにはおそらく使用しないCSSが大量に存在することを意味します。全体に不要なCSSがあるわけではありません。） Bootstrapに精通していれば、クラス/ ID名とスタイルシートの一般的な場所に精通していることを理解しています。だから、私はそれが私がかかっていた時間に少し曲がりたいと思っています、それのいくつかは私自身の不慣れのためであることに気づきました。 ただし、Bootstrap et。等 単に松葉杖であり、彼らは自分たちのブランドのコードをスプーンで与えることによってデザイナーを不自由にしている。したがって、サードパーティのソリューションに完全に依存する消費者ベースをロックし、すべてまたは少なくとも大部分の機能を実現します。Dreamweaverを使用できる場合にのみWebサイトを設計できるユーザーを思い出させます。そして、Dreamweaverにアクセスできず、変更が必要な場合、天国は禁止されています。 サイトを構築するとき、標準クラスとID名の独自のセットを使用します。CSSは、私にとって直感的な方法で構成されています。クイックセットアップ用のビルド前テンプレートの独自のセットがあります。したがって、私が構築するサイトは、かなり迅速に編集できます。事前構成済みのフロントエンドパッケージを使用するということは、自分自身に頼るのではなく、命名規則とその構造を学ぶ必要があるということです。 BootstrapやHTML5 Boilerplateなどのテンプレートシステムの大きな長所を誰かに賞賛できますか？ それらがあなたにとって価値があるのはなぜですか？ 使用しているシステムに慣れているだけなので、簡単にナビゲートできますか、それともアイテムを探し回る必要がありますか？ 必要な場合、それらなしでサイトを構築できますか？

27 website-design  css  website-templates  html 

各パスにCSSクラスを指定できるIllustratorでSVGファイルを編集する方法はありますか？ Illustratorでは、レイヤー名に実際の名前を付けると、その名前がパスのIDとして使用されることを既に知っています。これは、同じページでアイコンを複数回再利用する予定がない場合は問題ありません。 私の現在の回避策は、IDメソッドを使用することですが、その後コードエディターでIDをクラスに変換しますが、SVGスプライトを生成するたびに行う必要があるのはかなり面倒です。 現在Illustratorでそれが不可能な場合、それを指定できる他のアプリはありますか？または、GruntまたはGulpパッケージですか？ Inkscapeでハックを使ってそれを行うことができるように見えるので、他に良い解決策がない場合はそれを見るかもしれません。

21 adobe-illustrator  css  svg 

これはおそらく初心者の質問だと思いますが、それは本当に私を混乱させます。 私は、Google Material Designのドキュメントと、cssでのその実装の一部を読んでいます。仕様はAndroidで記述されていますがdp、CSSコードはpx長さの単位として使用します。 私を混乱させるのは、css実装が仕様から正確な値を使用することが多いことです。たとえば、トーストには次のものが必要です。 単一行のスナックバーの高さ：48 dpの高さ 最小幅：288 dp 2 dpの丸い角 対応するCSS： min-height: 48px; min-width: 288px; ... border-radius: 2px; 私の現在の理解では、Android DPは一般に160dpi画面で1ピクセルのサイズで表示されますが、CSS pxは視覚的な角度として定義されます。それで、ある距離で見pxたdpときと同じことが起こるのでしょうか？その場合は、一般的なパターンを使用することであるpxとして、dpCSSで、またはCSSコードを、私は完全にやった誤解？ 以前はAndroid開発について何も知らず、デザイナーも知りません。助けてくれてありがとう。

17 css  android 

WebデザインのPSDがあります。 デザインを微調整するたびに、CSSスプライトに異なるレイヤー可視性（透明性のため）を使用して、イメージの異なる部分を手動でコピーする必要があります。 どのくらい自動化できますか？

14 adobe-photoshop  export  css  sprite 

私はそれを正確に行い（レイヤーのCSSとHTMLを生成し、それらを％値でエクスポートするオプションを提供する）、Photoshopのweb-devの作業を半分に削減するスクリプトを見つけました。今、私は誰かがプラグインに出会った/アップしたり、Sketchアプリのようなネイティブ機能を教えてくれるかどうか興味があります。そのようなものがないことで、私のSketchへの移行は非常に苦痛です。または、Sketchが初めての場合、SketchがCSSとHTMLで動作する方法について、イデオロギー的に異なるものが不足しています。

13 css  html  sketch-app  plugin 

多くのデザイナーがPhotoshopで美しいWebデザイン作品を作成していることがわかりますが、CSS3の登場により、HTMLとCSSに変更したい場合は、ゼロから始めて、CSS3を使用して最終デザインの約80％を作成します。 たとえば、境界線の半径、不透明度、背景のグラデーション、ボックスシャドウとテキストシャドウ、その他のCSS3ルールを使用して、Photoshopで作成したものを取得します。多くの場合、彼らはPhotoshopから画像をインポートするだけです。これは、ブラシワークやロゴ、またはそのようなものに似ています。 私の質問は、Webデザイナーが何かを作成するためにPhotoshopを使用する必要があるかどうかということです。そのうち20％しか役に立ちません。 Webデザイナーは、Photoshopでデザインを作成する中間層をもう1つ追加することなく、HTMLおよびCSSでデザイン全体を直接作成し、そこに残りの要素を単純に作成できますか？

13 adobe-photoshop  website-design  css 

私はこれを効果的に作成するために背景画像（または画像ベースのソリューション）を使用しないようにしています： 注：赤い矢印は、問題の境界線を指しているだけです。矢印を回答に含めないでください。 この不規則な形の境界線を純粋なCSS（画像なし）で作成するにはどうすればよいですか？画像が避けられない場合、最も簡潔で読みやすい答えが支持され、受け入れられます。

12 css  borders 

CSS3のテキスト装飾モジュールには、テキスト全体の下に下線を配置するかどうかを指定するtext-underline-positionプロパティが含まれています。 またはベースラインのすぐ下で、テキストの子孫と衝突させます： さて、下線を最後の手段としてのみ使用する方法を知っていますが、...使用する場合、最も一般的な方法は何ですか？各下線スタイルの長所と短所は何ですか？

12 typography  css 

このフォーラムで、電子メールの署名に画像を表示（表示）することによって生じる問題（ここでは、たとえば）をいくつか見つけましたが、ウェブ全体を検索しましたが、それでも良い解決策は見つかりませんでした問題に十分に対処します。私のクライアントは、彼の電子メールの署名に彼の会社のロゴが含まれることを単に望んでおり、私が遭遇した問題は次のように要約できます： ロゴのラスタライズバージョンを実際のサイズでAIからエクスポートできます。デスクトップでは鮮明に見えますが、iPhoneなどの高密度（「網膜」など）ディスプレイではピクセル化/ぼやけます。 私が参照したスレッドで提案されているように、実際の表示サイズの2〜3倍でロゴをエクスポートして、高密度ディスプレイをターゲットにできますが、縮小すると、非高密度ディスプレイではロゴが柔らかく見えます。ロゴはテキストを含んでいるため、これはこの場合の特定の問題であり、ブラウザ/電子メールクライアントで実際のテキストと並置するとひどく見えます。 私は.svgオプションとして考えましたが、どうやらサポートは素晴らしいものではありません。この場合、このクライアントの電子メールを読むユーザーの大多数がOutlookを使用することを想定しているため、iOS / webkit / etcでのみ適切にレンダリングされるものは実行可能なオプションではありません。 この時点で私は途方に暮れており、他に可能なオプションが他にあるかどうか疑問に思っています。たとえば、メールの署名に高解像度のフォールバックを備えた高密度画像を実装できるかどうかはわかりませんか？ ここでの提案/洞察は大歓迎です。この仕事がいかに困難であることが判明したのかは、コミカルなものです。

11 css  image-quality  html  retina 

Webサイトで使用できるフォントサイズの数を教えてください。 誰かが3つ以上の異なるフォントサイズ（たとえば、見出しに16px、テキストに11px、小さい見出しに13px）を使用しない方がよいと私に言った。 Webページごとに4つ以上のフォントサイズ（例：4）を使用することは良いことですか、悪いことですか？4つ目を使用することを検討しているので質問しますが、それが私のデザインを台無しにする可能性があるかどうかはわかりません。

11 website-design  typography  css 

ブートストラップは素晴らしいフレームワークです。ブートストラップのhtmlコードを生成しながら、htmlコンポーネントのドラッグ、サイズ変更と移動、色の変更などの可能性を提供するツールがあるかどうか知りたいです。 Dreamweaverを使用したくないのは、クラスとIDをHTMLに追加する必要があるためです。

11 website-design  css  html