• 巧用css圆角实现有点意思的加载动画

    如果想学习更多css实用技巧,可以参考笔者以下的文章:css的border属性和border-radius属性笔者在前面的文章中也分享过了如何利用border来实现不同的形状,比如三角形,如下为原理图:利用这个原理我们只要把元素的border...
    文章 2022-05-05 33浏览量
  • quartz2D绘图(画一些简单的图形,如直线、三角形、圆、...

    线的连接点的类型(miter尖角、round圆角、bevel平角) CGContextSetLineJoin(context,kCGLineJoinRound);4.绘图(设置既填充有描边) CGContextDrawPath(context,kCGPathFillStroke);} 所画的三角形截图为: 绘制矩形 ...
    文章 2017-03-26 1391浏览量
  • 新手用WPF山寨QQ管家7.6(二)

    形状里有三角形,用它和圆角巨型组合出底层形状(相并),并构成ScrollViewer控件,在ScrollViewer内添加WrapPanel用于放3*3张图片。皮肤选择层代码 皮肤选择层样式代码 5.换肤的实现: 定义ResourceHelper类: 1 ...
    文章 2013-04-24 892浏览量
  • 值得把玩的各色CSS气泡!【精通CSS100例】

    就是对元素的圆角进行操作&xff0c;只需要对两条边同时操作&xff0c;即可产生效果。border-bottom-left-radius:15px 15px;然后的话&xff0c;拖尾是比较小的&xff0c;并没有图示的大&xff0c;这个时候再简单的方法&xff0c;就是在...
    文章 2021-12-16 34浏览量
  • 这些 Drawable 的小技巧,你都了解吗?

    3.5 海报的默认图 通常在图片加载的过程中,会为其定义一个默认图片。一般的设计都是会将这个默认图做的非常的简洁,例如中间一个 App 主题的 Icon,然后其它地方纯色铺平。类似下面这种效果: 这种默认的图片,当然...
    文章 2017-11-17 1104浏览量
  • CSS技巧让你的网站更上一层楼

    radius:5px-moz-border-radius:5px }/*Firefox*/.element { border-top-left-radius:5px-webkit-border-top-left-radius:5px-moz-border-radius-top-left } 至于其他的浏览器可以用JQuery 插件来实现圆角。...
    文章 2017-11-15 1115浏览量
  • 《JavaScript高效图形编程(修订版)》——6.7 画布...

    图6-5显示了使用不同圆角半径(从0开始,依次增加2π弧度)调用此函数的结果。以下的页面代码显示了如何在循环内调用drawRoundedRect()给出图6-5所示的输出: quadtraticCurveTo()和bezierCurveTo()命令使我们绘制...
    文章 2017-05-02 1600浏览量
  • PS网页设计教程XXIV——从头设计一个漂亮的网站

    现在开始创建搜索框,用圆角矩形工具,半径5px,在网格布局的右侧、步骤4中创建的顶端灰色矩形中部创建一个用于搜索的矩形(925,26,142,30),颜色:#5c6457。添加以下样式: 内阴影—颜色:#000000,混合模式:...
    文章 2017-11-17 1383浏览量
  • PS网页设计教程III——在Photoshop中设计优雅的网站...

    1、本文的软件是Photoshop CS5版本 2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的...
    文章 2017-11-15 1069浏览量
  • PS网页设计教程XXX——在PS中创建一个漫画书主题网页...

    圆角矩形工具(半径:5px)画一个穿过LOGO下方的横幅的宽的圆角矩形(240,180,940,250),就像下图所示,矩形的高度取决于你,我的是250px。然后给图层添加一个渐变叠加(颜色:#DA7E00-#F0AD00,角度:90)和...
    文章 2017-11-13 1401浏览量
  • CSS十问——好奇心+刨根问底=CSSer

    border-right-color:#c5c5c5 } ie6.skin_no#hd_nav a,.ie7.skin_no#hd_nav a,.ie8.skin_no#hd_nav a { color:#c5c5c5 } …… 这样做的优点就是克服了使用特殊符号hack的那些缺点,缺点是需要写更多的代码,使...
    文章 2017-08-01 915浏览量
  • PS网页设计教程XXVII——设计一个大胆和充满活力的...

    作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。...本文转自万仓一黍博客园博客,原文链接:http://www.cnblogs.com/grenet/p/3262187.html,如需转载请自行联系原作者
    文章 2017-11-21 1035浏览量
  • PS网页设计教程XXX——在PS中创建一个漫画书主题网页...

    圆角矩形工具(半径:5px)画一个穿过LOGO下方的横幅的宽的圆角矩形(240,180,940,250),就像下图所示,矩形的高度取决于你,我的是250px。然后给图层添加一个渐变叠加(颜色:#DA7E00-#F0AD00,角度:90)和...
    文章 2013-11-03 1177浏览量
  • 重构之美-浴火重生的火凤凰CSS3【前传:Gradient】

    比如,三角形,额,你能给三角形加一点圆角上去么?但是色彩,却是没有纯色的存在。也许你会说纯色的设计无处不在。是,纯色设计确实普遍,但是真正进入你的眼睛,你看见的,你感受到的,你体验到的,却不会是纯色,...
    文章 2017-11-07 1190浏览量
  • Tooltips提示框的视觉效果:SVG方案实现

    我们开发完的 生成工具地址(https://market.m.taobao.com/app/fdilab/svg-tool-demo/pages/index/index.html)如下&xff1a;对于熟悉SVG的 path命令的同学来说这个操作不难&xff0c;如果不熟悉的推荐看下下方的参考文章&...
    文章 2021-09-18 122浏览量
  • 【译】在Asp.Net中操作PDF-iTextSharp-绘制矢量图

    三角形就更容易画了,只需要画三条线就好,下面代码展示了如何画一个直角三角形,并标出直角: cb.MoveTo(350f,450f);cb.LineTo(350f,600f);cb.LineTo(500f,450f);cb.ClosePathStroke();cb.MoveTo(350f,460f);cb....
    文章 2017-12-07 1692浏览量
  • CSS3中惊艳的gradient

    background-image:linear-gradient(90deg,rgba(200,0,0,.5)50%,transparent 0),linear-gradient(rgba(200,0,0,.5)50%,transparent 0);background-size:30px 30px;} 第一组gradient先旋转90°,transparent 是透明,...
    文章 2017-11-09 1147浏览量
  • 前端可视化:Fabric.js HTML5 canvas 工具库(1)

    Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。文档&xff1a;官网&xff1a;http://fabricjs.com/github: https://github.com/fabricjs/fabric.js安装基本示例创建容器<canvas id&61;34;...
    文章 2022-09-14 32浏览量
  • HTML5 canvas开发详解(第2版)》——2.4 使用路径...

    本节书摘来自异步社区《HTML5 canvas开发详解(第2版)》一书中的第2章,第2.4节,作者:【美】Steve Fulton,Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。2.4 使用路径创建线段 路径可以用来...
    文章 2017-05-02 1652浏览量
  • HTML5 Canvas开发详解》——2.4 使用路径创建线段

    本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第2章,第2.4节,作者:【美】Steve Fulton,Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。2.4 使用路径创建线段 路径可以用来在画布上...
    文章 2017-05-02 1365浏览量
  • 前端笔记:帮助你美化网站的10+实用 CSS3 技巧

    CSS 实现三角形 这其实是一个古老的技巧,不需要用到 CSS3 新特性就能实现: create an arrow that points up*/ div.arrow-up { width:0px;height:0px;border-left:5px solid transparent;left arrow slant*/ border...
    文章 2013-02-19 891浏览量
  • PS网页设计教程XXII——在PS中创建单页复古网页布局

    Select the Rectangle Tool(U)and create a rectangle with the dimensions 1200px by 150px and the color#e9e5db.Name this layer"header bg"and place it at the top of your document. 用矩形工具创建一个矩形...
    文章 2017-11-14 1329浏览量
  • before和:after伪元素的用法

    很巧妙的应用一个div左border加圆角当机身,:before和:after配合圆角当听筒。lt;style type="text/css">phone{width:50px;height:50px;border-left:6px solid#EEB422;border-radius:20%;transform:rotate(-30deg)...
    文章 2016-10-09 818浏览量
  • JS组件系列——Gojs组件,前端图形化插件之利器

    无需切换服务器和插件,GoJS就能实现用户互动并在浏览器中完全运行,呈现HTML5 Canvas元素或SVG,也不用服务器端请求。GoJS不依赖于任何JS库或框架(例如bootstrap、jquery等),可与任何HTML或JS框架配合工作,甚至...
    文章 2017-11-28 3549浏览量
  • CSS3中惊艳的gradient

    background-image:linear-gradient(90deg,rgba(200,0,0,.5)50%,transparent 0),linear-gradient(rgba(200,0,0,.5)50%,transparent 0);background-size:30px 30px;}第一组gradient先旋转90°&xff0c;transparent 是...
    文章 2022-04-25 35浏览量
  • jQuery 特效实例_幽灵按钮4|学习笔记

    设置圆角效果为5px line-height:35px;margin:0 auto;使文字垂直居中 color:#ffffff;设置字体颜色为白色 font-size:18px;字体大小为18px font-weight:700;字体加粗效果 }文本框效果图&xff1a;box.tooltip span{/三角形...
    文章 2022-02-17 146浏览量
  • Highcharts的基本属性和方法详解

    categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']/lineWidth:1,/纵轴一直为空所对应的轴,即X轴/plotLines:[{/一条竖线/color:'#FF0000',/width:2,/value:5.5/}]/labels:{/...
    文章 2015-12-05 1098浏览量
  • PS网页设计教程XII——在PS中创建专业的web2.0的网页...

    1、本文的软件是Photoshop CS5版本 2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的...
    文章 2017-11-15 1153浏览量
  • PS网页设计教程XII——在PS中创建专业的web2.0的网页...

    1、本文的软件是Photoshop CS5版本 2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的...
    文章 2017-11-13 1038浏览量
  • 聊聊双11互动主动法中前端技术亮点

    也就是说,如果你需要一个带圆角的渐变边框,那么使用border-image是有局限性的,除非人肉为其准备带圆的背景图,或者有更好的办法通过代码绘制一个带圆角的背景图~ 此路似乎在这个项目中行不通,只能考虑换用别的...
    文章 2018-11-14 1794浏览量
1 2 >

云产品推荐

视频直播 大数据计算服务 MaxCompute 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 新零售智能客服 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT 阿里云科技驱动中小企业数字化