精华内容
下载资源
问答
  • 这里是一个简单的CSS技巧,它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空标签,它使用背景图片和position:absolute属性将标题覆盖。该技巧经...

    你想制作漂亮的标题而不用将每个标题都做成图片吗?这里是一个简单的CSS技巧,它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空标签,它使用背景图片和position:absolute属性将标题覆盖。该技巧经主流浏览器测试:Firefox, Safari, Opera, 以及Internet Explorer 6。

    好处

    这是一个纯CSS技巧,无需JS或Flash。它兼容主流浏览器包括IE6 (需要使用PNG hack)。

    它对于设计标题是很完美的。你无需使用Photoshop制作每一个标题。这也显然能够节省你的时间和带宽。

    你当然可以是用任何网络字体和字体型号。

    它是如何工作的?

    这个小技巧很简单。基本上我们只是在文字上面添加了一个1px的渐变PNG图片(使用alpha透明)

    384c0b1644ffe96dcb3187f487e25c67.gif

    HTML代码

    CSS Gradient Text

    CSS代码

    这里的关键点是h1 { position: relative }和h1 span { position: absolute }

    h1 {

    font: bold 330%/100% "Lucida Grande";

    position: relative;

    color: #464646;

    }

    h1 span {

    background: url(gradient.png) repeat-x;

    position: absolute;

    display: block;

    width: 100%;

    height: 31px;

    }

    是的,就这些,你已经搞定了。点击此处查看演示页面。

    让它在IE6中可用

    因为IE6不能正确渲染24位PNG图片,为了显示透明的png图片,下面的hack是必须的。(使用HTML条件注释的方法)在head部分的任何一个地方添加以下代码:

    这正式我们为什么憎恶IE6的原因之一!

    jQuery动态加入版本(对语义爱好者有用)

    如果你不想在标题里面有个空的标签,你可以使用Javascript动态加入标签。使用jQuery的prepend 方法可以很容易的实现:

    $(document).ready(function(){

    //prepend span tag to H1

    $("h1").prepend("");

    });

    更多的例子

    想要实现Web 2.0的光滑文字?

    04e327996b9610dfa6358da990bbd93a.gif

    如此类推,你可以将此技巧用于任何固定背景色的情况(渐变色和背景色一样)

    6e3db3a392a6b41cb29467bc41f1dc0f.gif

    716c6e416454853ad7d5bba15027d2fa.gif

    0cde61ad8768c252058621d8a066939c.gif

    3524506a72c8c30e8744e712405f88dd.gif

    1c6fb7091609aaff0f6e4b9a49c5025d.gif

    bb2f832bd87aadef2235e6f1d24226d9.png

    图案/纹理

    你也可以用一个砖瓦背景图片。看呀,这就是这就是一个斑马图案。——那么,随意发挥吧!

    a596a3ec737db0540c0bac990d62a8c4.gif

    局限性…

    这个技巧只适用于固定背景色的元素。你的渐变色(PNG 图片) 必须与背景色是同一个颜色。

    如果你想兼容IE6,就需要使用IE6的PNG hack(比如滤镜或JS方法)

    如果你的渐变图片比标题要高,那么这个文字将是不能被选择的。

    PS:关于局限性的第一条,建议在demo页面使用firebug调试一下,改变一下背景色,就可以看出变化了——神飞。

    展开全文
  • Color Fonts,多彩字体是近两年频繁出现的设计语汇,越来越多的设计项目当中,开始使用这一技术,尽管目前它依然处于起步阶段。 诸如Adobe Typekit 这样的字体...作为一个植根于网页设计领域的设计趋势,多彩字体...

    Color Fonts,多彩字体是近两年频繁出现的设计语汇,越来越多的设计项目当中,开始使用这一技术,尽管目前它依然处于起步阶段。

    诸如Adobe Typekit 这样的字体服务供应商,已经开始提供一些支持特定浏览器的多彩字体。也正是因为多彩字体使用范围越来越广泛,才有设计师预测,它会成为网页设计领域的“Next Big Thing”。

    作为一个植根于网页设计领域的设计趋势,多彩字体到底有着什么样的特征?今天的文章,我们一起来聊聊这个话题。

    什么是多彩字体

    顾名思义,多彩字体(Color Font),字体本身所包含的不仅仅是外观形体的特征,不同的区域可以以不同的色彩来呈现,甚至包含阴影、渐变、纹理和透明度等属性。这些时髦的属性不仅赋予了字体复杂多变的色彩,而且让它具备更加丰富的细节。

    多彩字体不仅包含了常见字体中应有的矢量形状或位图信息,或者兼而有之,这也使得多彩字体的字体文件要比普通的字体更大。如果你对于多彩字体没有太多概念,那么你想想我们用过的图标字体和表情字体,它们就是多彩字体的一种。同时,我们常用的字体通常被称为 Chromatic Font ,也就是“有色的字体”,因为它们通常只能包含一种色彩。

    不过,多彩字体还存在问题,最大的问题在于目前并没有一套通行的字体标准。使用类似SVG的矢量文档的还好,而使用位图格式的多彩字体,字体文件大小则会随着字体尺寸的增大而膨胀。

    目前常见的多彩字体包含下面的5种格式:

    ·SBIX(Apple):在macOS 和 iOS系统上的原生位图字体

    ·CBDT(Google):在Android 系统上使用的原生位图字体

    ·COLR(Microsoft):在Windows 8.1+ 系统上使用的矢量字体

    ·SVG(W3C):有矢量和位图两种版本

    ·OpenType SVG(Adobe/Mozilla):将矢量和位图版的SVG文档置于 OpenType 字体中而构成的字体

    另一方面,许多使用多彩字体的企业机构正在逐步完善它们旗下的字体格式的标准和使用规范。Mozilla(Firefox背后的支持机构)和Adobe 已经正式声明了 OpenType SVG 为它们多彩字体的首选格式。当它们作出决策的时候,其他企业尚处于观望阶段。

    如果你现在想着手了解多彩字体本身,那么Fontself 的这篇文章应该可以帮你适当的入门。

    多彩字体怎么用?

    当你第一次看到多彩字体的时候,通常会出现两种反应:

    ·卧槽好恶心!

    ·牛逼,我知道要在什么地方用它了!

    无论你的反应是哪种,都无法忽略一个事实:有许多APP和网站都非常适合多彩字体来发挥作用。不过,当你在使用它们的时候,要足够谨慎,也合乎情理。

    在下面的情形下,你可以尝试使用多彩字体:

    ·想让一个短语抓住用户注意力

    ·使用图标或者LOGO样式元素的时候

    ·大量文本内容开头的大写字母/大写单词

    ·给极简主义设计中作为视觉主体的标题使用

    ·大块文本当中某个或者某几个需要吸引用户注意力的单词

    ·当整个设计的其他部分都比较简单的时候

    ·当排版是整个设计最主要的视觉元素的时候

    ·当整个设计项目需要一些更加不同寻常的设计来吸引用户的注意力的时候

    何时避免使用多彩字体

    当色彩使用过多时候,常常会让整个设计看起来像是80年代末的风尚。如果你不想让过多的色彩使用对于整个设计产生过大的影响,那么就要谨慎控制多彩字体的使用。在下列情况下,要注意:

    ·当字体的背景是图片的时候

    ·背景的视觉设计较为复杂的时候

    ·有大量的文本内容的时候

    ·当页面中包含大量的动画和动效,或者其他元素包含了大量色彩的时候

    ·已经在页面的其他地方使用了新奇特殊的字体

    多彩字体设计趋势

    实际上,从一开始排版设计就从多彩字体中获利。Adobe 和Mozilla 所推行的 OpenType SVG 格式可能是目前对多彩字体推动最大的一种格式。Adobe 最近甚至已经开始为Photoshop 更新了对这一字体的支持。

    Adobe 对于 OpenType SVG 的阐述是这样的:

    “OpenType-SVG 是一种包含了全部货部分字母/字形的SVG 图形,它使得单个文字可以显示多种色彩甚至渐变。正式因为它的这一特性,我们将OpenType-SVG 格式字体命名为多彩字体。”

    “OpenType-SVG 字体和普通字体一样,直接拿来使用,可以编辑,搜索和索引。同时,其中还包含了可供替换的字形,这一点和 OpenType 是一致的。”

    “诸如 Trajan Color Concept 和 EmojiOne Color 这样的字体已经拥有了可供编辑的色彩属性,如果你的字体工具支持它们的话,就可以正常显示且可编辑。如果工具对于多彩属性并不支持的话,它依然可以作为普通字体来使用,不过只能以纯色的形式来展现。”

    除此之外,The State of Web Type 中详细阐明了多彩字体需要哪些浏览器的功能支持。

    在多彩字体的演变和使用上,有两个主要的影响因素:

    ·浏览器对于网页设计项目中多彩字体的兼容性

    ·设计项目的对于华丽多彩的文本在风格上的匹配性

    上手试试

    如果你确定多彩字体是你的设计项目所需要的东西,那么你可以选择现成的多彩字体来进行调整,也可以根据现有的普通字体来进行重设计,当然,这主要取决于你所进行的设计项目的类型。

    自制多彩字体

    制作多彩字体的方法有很多,这主要看你使用什么样的软件。多彩字体所能承载的元素很多,它可以是一张漂亮的图片的一部分,也可以是你用笔绘制出来的元素。你完全可以使用你熟悉的工具来玩趁多彩字体的设计。

    ·Fontself 是一款AI 和 PS 可用的插件,可以帮你更方便创建多彩字体

    ·你也可以参考 Glyphs 的教程从头开始绘制多彩字体

    ·FontLab 有一个视频教程,为你介绍整个设计过程

    下载使用

    当然,现在还有一些现成可用的多彩字体供你学习和使用:

    ·Type with Pride

    ·Beach Towel

    ·Bungee

    ·Watercolor Font

    ·Bixa Color

    ·Kids Toys

    ·OneLine Bold

    ·Guru

    ·Neon

    结语

    在海报和平面设计中,多彩字体的使用有着极大的需求。不过数字化的网页也开始越来越多地拥抱这种设计元素,这也是为什么它会成为一种设计趋势。

    文章来源:http://www.haitaoit.com

    转载于:https://www.cnblogs.com/hytj/p/6943541.html

    展开全文
  • 网页设计中使用渐变的趋势时有发过好几次。如果你浏览了这些年来网页设计趋势的各种列表,你会发现经常包含很多种渐变。多年来,它们在网页设计中的使用方式已经从我们现在认为俗气的方式发展到极富想象力和美观的...

    点击上面的蓝字关注我们哦!

    8dad822a156277f483fd7b12cbf5a80c.gif

    569339feb0b8ae61384e8e183065db4e.png

    在网页设计中使用渐变的趋势时有发过好几次。如果你浏览了这些年来网页设计趋势的各种列表,你会发现经常包含很多种渐变。多年来,它们在网页设计中的使用方式已经从我们现在认为俗气的方式发展到极富想象力和美观的方式。

    在本文中,我们将研究Web设计中一些启发性的渐变用法,并提供一些可用于创建自己的渐变色的工具,以及一些免费的渐变图像网址。

    1、实时游戏分析的登陆页面

    在此网站模型中,使用美丽的紫色到粉红色到珊瑚混合的背景渐变,并结合前景渐变和匹配的矢量插图,提供了一种独特而新颖的技术。

    94227cc149a52740afe434b42eb30312.png

    2、X字母标志设计

    三维徽标设计采用了浅褐色至几乎橙色的渐变色,使其具有丰富的深度和优雅感。

    873a0a17e5b03996ea9cf3ffbc93a7b6.png

    3、在悬停和过渡中

    将鼠标悬停在这个屡获殊荣的网站中的元素上,即可看到在黑色背景上弹出的令人惊叹的动画渐变。单击菜单以显示神奇的渐变动画!

    d5b05b5740093b1926f11a74c40eb058.png

    https://ruya.digital/

    4、渐变点+径向彩虹渐变

    如屏幕截图所示,该网站使用鲜艳的多色渐变背景,并在不那么显眼的位置使用渐变作为配对。

    dbc669dafde63f1553335a9e2ba72935.png

    https://www.synesthesia.world/de

    5、具有渐变Blob动画的渐变背景

    这个令人惊叹的网站充满了明亮多彩的渐变背景,并带有一些非常酷的动画,包括在屏幕上移动的粘稠渐变斑点。

    5e4d449b4a98ca24686df0a993aee250.png

    https://elje-group.com/

    6、背景和形状

    在背景中有趣地使用渐变,并在网站的每个面板上设置各种形状的动画,所有这些都设置为内容的背景。

    1b377bb1862494a425502e68d7dc3b9a.png

    https://www.playup.com.ar/

    7、渐变背景

    该网站使用明亮的渐变背景来照亮页面,并为将内容带到最前沿提供了丰富多彩的基础。

    85abf3352da5264ca5f514f95f33d27c.png

    https://www.roninamsterdam.com/

    8、对角头渐变

    Stripe在标题中使用对角线背景渐变来增加深度,并设置舞台以匹配对角线内容,从而实现不同而又醒目的设计。

    e99ab5782d094459133372a25ee1d502.png

    https://stripe.com/zh-cn-us

    9、整个渐变

    在整个页面中,该网站利用背景和前景插图中的渐变,形状动画以及更聪明和更丰富多彩的方法。

    523aab07be71bf6116c37c0ff50be3c4.png

    https://www.atomic.ie/dna/manifesto/

    10、渐变标题逐渐变为白色

    该样机在标题中使用了柔和的颜色渐变背景和形状,这些颜色和形状平滑地淡化为主要内容的白色,从而提供了清晰、舒缓的陈述。

    fdcb167dbb6cf3b84a2be6bbc2866914.png

    11、渐变图像网址

    你可以用下面的网址来创建自己的渐变,这些是提供渐变灵感和调色板的集合。

    https://cssgradient.io/

    https://uigradients.com/

    http://khroma.co/train/

    https://webgradients.com/

    https://mycolor.space/gradient

    https://uigradients.com/

    https://www.grabient.com/

    https://webkul.github.io/coolhue/

    a37eaf98e6c40f795b24ef8d38134ed5.png 作者:ShotStash 原文地址:https://shotstash.com/inspirational-gradients-in-web-design/ 翻译:Tzw_n

    推荐阅读

    字体选择与搭配实操演示

    手把手教你简单又实用的AI小技巧

    配色攻略-橙色篇

    首发 | 2021年UI界面设计趋势

    组件化思维的设计流程

    设计师想进大厂,这个分析能力必须掌握!

    这个方法,搞定了我大部分产品体验分析

    小孩才做选择,设计高手都玩红配绿!

    设计学习课程

    e8c92604b7939bfde60bb1b76e080496.png

    《竹笋集板绘班》11月班报名中

    设计学习课程

    2abaad7f75b0dc53f42d0e2bf110751c.png

    《视觉全能班》10月班报名中

    往期学生作业访问站酷https://booui.zcool.com.cn

    2da10c59cfa2fedcc212768682b0394c.gif

    聊最新鲜的设计

    欢迎关注、置顶/星标微信公号 

    也别忘了每天点在看、分享鼓励一下哦~

    a815406e94650c709209a486bb9dc63b.png

    点个在看,每天收到最新资讯13d6d89fc19ae5fdef01d30940882a52.gif

    展开全文
  • 假设有一个td,里边有一个div,就是 首先,打开html编辑器,新建html文件,...height: 150px;background: linear-gradient(red, white);}javascript 如何实现div 颜色的渐变??假设有一个td,里边有一个div,就是...

    假设有一个td,里边有一个div,就是

    首先,打开html编辑器,新建html文件,例如:index.html。

    在index.html中的标签中,输入css代码: div {width: 200px;height: 150px;background: linear-gradient(red, white);}

    b12e15f277a04bc63679566d61109402.png

    javascript 如何实现div 颜色的渐变??

    假设有一个td,里边有一个div,就是

    css字体渐变,css怎样定义让字体有渐变颜色

    新建一个html文件,命名为test.html。

    在test.html文件内,使用font标签创建三行文字,分别用不同的方法给font字体设置颜色。

    在test.html文件内,直接在font标签上,通过color属性来设置字体的颜色。例如,设置font字体的颜色为红色。

    代码如下: background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/ background-image: -webkit-gradient(linear,left bottom,left top,col

    CSS中的字体怎么渐变颜色啊最笨的方法就是每个字都设置一个颜色 最聪明的就是换成图片 2017年6月13日16:22:18更新 2012年回答的时候CSS3尚未普及,回答有欠缺。

    WEB网页页面背景颜色渐变设置

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向与径向渐变(Radial Gradients)- 由它们的中心定义 线性渐

    展开全文
  • fonts时,使用中文的网页设计师只能发出一声叹息。中文世界的网页字体窘境,不仅仅是由于中文符号过多造成的字体文件过大这样的技术阻碍;更深一层的 原因是,根本就没有几种可用的好字体。 一方面,尽管一些中文...
  • CSS 网页文字渐变效果

    2020-12-08 19:45:37
    这里是一个简单的CSS技巧,它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空标签,它使用背景图片和position:absolute属性将标题覆盖。该技巧经...
  • 最近学到div背景渐变色,碰到一些小的点,这里收藏一下。写到渐变色之前,这里先在平时不注意的地方留一爪。(1)使body填充整个空间,而不是默认值:这里需要在css文件的最开头写一句:* {margin:0;padding:0}(2)去除...
  • 网页设计

    2019-04-08 14:40:34
    网页设计 (陈子龙 2019 4/8) 这是我设计的一个手机的网页,这个网页是以蓝紫色为主的网页,字体用的是黑体,这张网页用了5种颜色,这张首页是比较简洁,明了的。这张首页是买手机,所以采用了蓝色和紫色,这俩...
  • CSS3_01_圆角_边框_渐变_字体

    千次阅读 2018-03-10 10:26:14
    手册说明: CSS3使用了层叠样式表技术,可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版,拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。 CSS3的改变有...
  • CSS渐变:(gradients)可以让两个或者多个指定颜色之间呈现平稳的过渡; ** 线性渐变:可以指定方向的渐变 径向渐变:有中心定义的渐变方式。 线性渐变: 使用background-image:可做渐变处理 background-image:...
  • 网页导航菜单设计关系到你的网站整体设计成败,所以不少优秀的网站设计通过颜色、排版、形状和一些图片的精心修饰来帮助网站创造更好的视觉效果,我们...顶部文字全部采用大写,而小号的字体渐变灰的渲染让它们显...
  • 想在网页中添加一些彩色渐变色的文字怎么办?一个字一个字地定义颜色代码?其实网上有一些在线服务可以帮助我们轻松得到这些彩色文字的网页代码。首先登录http://www.chami.com/tc/网站,在"Type the text to ...
  • 1.定义渐变边框 实例设计: 本例使用 backgroun-imag 属性提供渐变边框,定义渐变边框,效果如下: 代码: ...2.定义渐变填充色 ...本例使用四个 径向渐变 叠加 为网页设计此背景 代码如下: ...
  • 10个您不想错过的最佳网页设计软件

    万次阅读 多人点赞 2019-04-22 08:13:16
    您在寻找最好的专业网页设计软件吗?网页设计软件使您能够在更短的时间内创建Web模板和设计。在过去,您必须编写数百条困难的代码行来创建最基本的模板; 但是,随着现在市场上的高级网络创建软件,任何人都可以快速...
  • 七、网页背景 background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把...
  • 刚学平面设计如何用简单的方法来设计字体?设计师在日常工作中每天都在跟字体打着交道,视觉传达的根本目的是传播信息,文字是承载信息的关键要素。在一幅广告设计中,既可以没有图形,也可以没有照片,但唯独不能...
  • Web Design Tips: SVG Design 中文字幕 网页设计技巧之SVG设计 中文字幕Web Design Tips: SVG Design 观看此视频以获取关于...Brian Wood解释了使用独立画板,处理Web字体,保持渐变和路径尽可能简单以及在Illustr...
  • 2019年网页设计趋势前瞻,先睹为快!

    千次阅读 多人点赞 2019-01-07 10:52:09
    追随最新的网页设计趋势,紧跟设计潮流是设计师们必做的功课之一。快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响。 回顾2018年的网页设计趋势,不难看出许多设计趋势都是周期...
  • 网页设计教程:从设计到制作过程

    千次阅读 2015-10-21 16:34:16
    导读:这是一篇很详细的网页设计教程,用photoshop一步步设计与制作出一个精美的网站首页样稿,本文最值得推荐的是作者写出了自己的设计思路,相比其他一些网页设计教程来说不仅告诉你怎么做,更高速你怎么去想,也...
  • 我个人觉得网页上有动态元素会让人感觉很炫酷所以整理了一下个人感觉很常用的一些CSS属性 动画属性(常用) 属性 说明 background 背景 color 字体颜色 filter 滤镜 flex ...
  • 运用HTML,我们可以对字体的大小及...考虑到用FrontPage制作网页的人较多,同时它对其他网页编辑器的使用者也有一定的借鉴作用, 因此,我就讲解一下如何在frontpage2000中运用css设置网页字体。 我们可以用css...
  • 有许多人都认为手机网页设计与电脑网页设计有很大不同,其实不是,手机网页除了小且可以触摸外,很多设计原则与电脑网页设计是共通的。这里有 5 个基本的元素,希望对设计师有所帮助。 1. 有意义的导航 在移动设备...
  • 1 Web字体图标 超链接样式 列表样式 背景样式 渐变效果 网页设计与制作 CSS3美化页面元素 设计 制作 2 回 顾 Web字体图标 超链接样式 列表样式 背景样式 渐变效果 属性名 含义 举例 font-family 设置字体类型 font-...
  • 如何用css设置网页字体

    千次阅读 2009-09-10 17:12:00
    网页界面的设计过程中,许多人考虑最多的是用什么图形与色彩来装饰网页,或是在网页上加上什么动画特效;而对于网页字体却不太重视。结果往往是有些网站的字体不是太小就是太大,严重影响阅览;而有的网站整页用...
  • Web前端开发笔记-----16.3D、背景扩展、css3渐变字体图标 文章目录Web前端开发笔记-----16.3D、背景扩展、css3渐变字体图标一、3D1.transform3D相关属性2.3D相关属性3D效果之旋转木马3d效果之翻转图片二、背景...
  • 朱 照华, 程序员, 自由职业者 ...简介: 本文介绍了使用 Cufon 进行网页字体渲染的一般方法和技巧,并以此为基准,介绍了 Cufon 技术的主要实现原理和这一原理的可能应用领域 发布日期: 2009 年
  • 本文总结了明年将流行的网页设计趋势,如响应式、扁平化、微交互、个性化等等,希望给那设计师们一点有价值的参考。 1. 响应式 在过去的几年里,响应设计快速巩固了自己作为网页设计的新标准。当然,也有争论,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,239
精华内容 2,895
关键字:

网页设计字体渐变