Questions tagged «css»

作为Web开发人员，无论是前端还是后端架构师，我与许多不同的设计师一起工作，有时会发现使用设计组件令人沮丧，因为他们没有考虑过如何用基本的CSS和HTML完成设计。另一方面，作为开发人员，我希望能够从任何设计生成代码。 网页设计师是否需要了解基本的现代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。它使用与页面标题相同的字体，该页面使用字体“ ubuntutitling-bold-webfont”，我在CSS文件中将其引用为.woff。标题起作用，但是svg不起作用-它以某种默认字体显示“ f”。字体文件相对于CSS和图像文件位于../fonts/ubuntutitling-bold-webfont.woff，而相对于网页则位于fonts / ubuntutitling-bold-webfont.woff。 我如何将Google Web字体嵌入到SVG中？，但我什至对如何将代码应用于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" …

28 css  svg  web-fonts 

我已经在Illustrator中完成了一些插图，并且打算为正在工作的网站制作动画，我听说过带有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从头开始构建网站。 我已经了解了一些预构建的CSS模板，例如Bootstrap或HTML5 Boilerplate。我过去曾简短地看过它们，但从未跳入实际将它们用于任何用途的情况。重置CSS或在需要时包含javascript或为视口配置时，我没有任何问题。 今天晚上，我编写了一个基本的HTML5 / CSS页面。就布局而言，没有什么真正令人震惊的。只是一个起点。之后，我决定给Bootstrap一个相同布局的漩涡。这是一个相当标准的960px，带有英雄图片页面的3列。 在更改Bootstrap时，我发现我有80％或更多的时间都花在学习将什么类或id应用于某事上，然后在CSS中进行调整。很明显，Bootstrap根本不会拯救我。实际上，由于*模板过多的CSS，Bootstrap将大大增加生产时间。 *（通过“过度模板化”，我的意思是有很多CSS我可能不会在任何给定的网站上使用。并不是说整体上没有不必要的CSS。） 我知道，如果我熟悉Bootstrap，就会熟悉样式表中的类/ ID名称和常规位置。因此，我愿意花点时间花些时间，意识到其中一些原因是我自己不熟悉。 但是，我不禁怀疑Bootstrap等。等 仅仅是拐杖，使勺子喂给他们自己的品牌代码而使设计师瘫痪。因此，锁定了一个消费者基础，该消费者基础将完全依赖于第三方解决方案及其功能，从而满足所有需求，或者至少满足大多数需求。它使我想起那些只有使用Dreamweaver才能设计网站的人。如果他们无法访问Dreamweaver，并且需要进行更改，则天堂禁止。 建立网站时，我使用自己的一组标准类和ID名称。我构建CSS对我来说很直观。我有自己的一套快速构建模板。因此，我建立的任何网站都可以快速编辑。使用任何预先配置的前端包只是意味着我需要学习他们的命名规则和他们的结构，而不是依赖于我自己。 有人能称赞我这些模板系统（如Bootstrap或HTML5 Boilerplate）的优点吗？ 是什么使它们对您有价值？ 您是否只是熟悉所使用的系统，以便可以轻松地导航它，还是仍然需要寻找物品？ 您是否可以在没有他们的情况下建立一个站点？

27 website-design  css  website-templates  html 

有没有办法在Illustrator中编辑SVG文件，您可以在其中为每个路径指定CSS类？ 我已经在Illustrator中知道，如果给层名称一个真实的名称，Illustrator将使用该名称作为路径的ID，如果您不打算在同一页面上多次重复使用该图标，那就很好了。 我当前的解决方法是只使用IDs方法，但是随后在我的代码编辑器中将ID转换为类，但是每次生成SVG Sprite时都必须这样做很烦人。 如果在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屏幕上以一个像素的大小显示，而CSS px被定义为视角。那么在远处看到时px碰巧是否与相同dp？如果是这样，这是一个共同的模式使用px如dp在CSS中，还是我完全误解了CSS代码？ 我以前对Android开发一无所知，但对设计师一无所知。谢谢你的帮助。

17 css  android 

我有一个网页设计的PSD。 每次调整设计时，都需要将具有不同图层可见性（用于透明度）的图像的不同部分手动复制到CSS精灵中。 可以自动化多少？

14 adobe-photoshop  export  css  sprite 

我找到了一个脚本，它可以精确地完成此操作（为图层生成CSS和HTML，并提供以％值导出这些内容的选项），并为Photoshop将Web开发的工作减少了一半。现在，我很想知道是否有人遇到/使用了插件，或者可以指出我的本地功能，例如Sketch应用程序的功能。缺少这样的做法使我过渡到Sketch时非常痛苦。还是刚开始使用Sketch，我只是缺少了一些关于Sketch与CSS和HTML配合使用的思想上的差异。

13 css  html  sketch-app  plugin 

我看到许多设计师在Photoshop中创建了精美的Web设计作品，但是现在随着CSS3的到来，当他们想要将其更改为HTML和CSS时，他们只是从头开始，并使用CSS3创作了大约80％的最终设计。 例如，他们使用边界半径，不透明度，背景渐变，框阴影和文本阴影以及其他CSS3规则来获取在Photoshop中创建的内容。很多时候，他们只从Photoshop导入图像，这更像是笔刷或徽标，或类似的东西。 我的问题是，网页设计师是否仍应使用Photoshop来创建内容，而其中只有20％对他们有用？ 网页设计师是否可以直接在HTML和CSS中创建整个设计，而无需在Photoshop中添加创建设计的另一个中间层，然后在其中简单地创建其余元素？

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 

我想知道一个网站可以使用多少种字体大小。 有人对我说，最好不要使用超过3种不同的字体大小（例如，标题使用16像素，文本使用11像素，较小的标题使用13像素）。 每个网页使用3种以上的字体大小（例如4种）是好是坏的主意？我只是问，因为我正在考虑使用第四个，但不知道它是否会破坏我的设计。

11 website-design  typography  css 

Bootstrap是一个很好的框架，我想知道是否有一个工具可以让您拖动html组件，调整其大小和移动它们，更改颜色，同时生成bootstrap html代码。 我不想使用Dreamweaver，因为您需要去为html添加类和ID，这有时可能很麻烦。

11 website-design  css  html