Category: Div / Css / XML / HTML5 / SVG

31个最佳Bootstrap 4后台管理模板, 2019适用于Web应用程序和网站后端的最佳模板, 31 Best Bootstrap 4 Admin Templates For Web App and Website Backends 2019

  智能手机得到了发展。这些设备逐渐超越其早期版本的简单性,已成为多平台控制台。因此,所有网站都必须适应这种新的动态环境。由于没有完全响应的界面,企业可能会冒很大一部分目标人群疏远的风险。管理面板和页面本身都必须具有完全响应能力,能够支持手持设备。 对于那些希望建立并保持成功的网络存在的人来说,Bootstrap是一个理想的选择。它简化了移动优先网页设计,使其非常人性化。它拥有大量的组件,工具和模式,为前端开发人员和Web设计人员提供支持。这个多产的前端框架绝对是一个改变游戏规则的游戏。您可以将Bootstrap 4管理模板用于任何类型的产品,应用程序或站点。因此,许多管理面板可以容纳所有… Read More

10 个超炫酷后台控制面板(附 GitHub下载链接), 免费后台模板

Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的开源免费的控制面板呢?我在 Github 上收集了一些优秀的后台控制面板,并总结得出 Top 10。 zhisheng 点评:有好的轮子可以直接用,重新造轮子耗时太长,做出的效果还不一定够好   AdminLTE Github Star 数 24969 , Github 地址:https://github.com/almasaeed2010/AdminLTE 非常流行的基于 Bootstrap 3.x 的免费的后台 UI 框架。   vue-Element-Admin Gi… Read More

邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template

  <div style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: se… Read More

CSS3选择器「:nth-child()」与「:nth-of-type()」用法大不同, :nth-of-type 用法, CSS 伪类

    虽然说目前CSS3还没正式的标准化,但新的属性已为网页带来许多的便利,像是大家所熟悉的圆角框、阴影、渐层、多栏位….,甚至目前正夯的RWD自适应,这些都是需要使用到CSS3,除此之外CSS3还提供了许多的选择器可使用,如此一来就可大量的减少一些类别的设定,直接透过HTML的标签就可直接进行选择与样式的设定,虽然说很方便,但在CSS3有二个选择器长的很像nth-child与nth-of-type,在正常情况下,二个用起来很像,但若HTML的结构改变时,二个就大不同啦!!!因此梅干作了一个小范例,来帮大家解惑,这二个属性的最大差别什么地方。   :nth-of-type(… Read More

HTML特殊字符显示, HTML 字符实体, HTML EntityCode, Character Entities, HTML Entities

HTML字符实体(Character Entities) 有些字符在HTML里有特别的含义,比如小于号<就表示HTML Tag的开始,这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号,该怎么办呢? 这就要说到HTML字符实体(HTML Character Entities)了。 一个字符实体(Character Entity)分成三部分:第一部分是一个&符号,英文叫ampersand;第二部分是实体(Entity)名字或者是#加上实体(Entity)编号;第三部分是一个分号。 比如,要显示小于号,就可以写&lt;或者&#60;。 用实体(Entity)… Read More

CSS生产小图标 A list of Font Awesome icons and their CSS content values

用法: .element {     position: relative; }   /*replace the content value with the corresponding value from the list below*/   .element:before {     content: "\f000";     font-family: FontAwesome;     font-style: normal;     font-weight: normal;     text-decoration: inherit; /*--adjust as necessary--*/     color: #000;… Read More

SASS界面编译工具——Koala的使用

《SASS界面编译工具——Codekit的使用》一文中图解了”CodeKit”图形工具编译SASS项目。由于CodeKit是一款付费工具,而且只能在Mac中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是,有一款国产图形工具Koala和CodeKit功能极其类似,支持多个平台,而且是开源的。 Koala Koala官网下载Koala Koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、li… Read More

CSS3: 利用分层动画让元素沿弧形路径运动

原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙 译者注:部分代码示例在原文中可以看效果(作者写在博文里面了…),我偷懒把它做成Gif图了。 CSS 的 animations (动画) 和 transitions(变换)擅于实现从点 A 到点 B 的直线运动,运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后,无论你如何调整贝塞尔曲线,都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性,做出弹动的效果,但是它沿着 X 和 Y 轴相对移动的值永远是相同的。 与其使用 JavaScript 实现外观自然的运动,… Read More

HTML5: 利用SVG动画动态绘制文字轮廓边框线条

DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIAL ICONS。 制作流程 先用一张gif图片来看看效果: 制作SVG 1、首先你要下载和安装一款矢量图形编辑器,推荐使用Inkscape。 2、打开Inkscape,创建一个新的文档。在文档的左上角创建你的文字。 3、使用选择工具选取你创建的文字。 4、在Path菜单中,选择Object –> Path。然后保存为SVG。 5、使用文本编辑器打开你刚才保存的… Read More

如何制作HTML5 SVG描边文字

在很多时候,SVG是最容易在网页上做出文字特效的方法。现在SVG已经被所有的现代浏览器支持,包括IE9。要在页面上制作SVG文字,可以直接将SVG代码插入带页面中,SVG文字代码十分简单易懂。如下是一段SVG描边文字的代码: <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <text fill="#e96" style="font-size:60px; font-family: Futura Condensed ExtraBold, Arial Black, sans-serif; color: yellow;" stroke = "black" st… Read More

基本的SVG样式属性

SVG的样式属性和CSS的语法非常接近,有时甚至是一样的,经常会照成一些使用上的混乱。 注意,我们在这里讨论的是用于SVG代码本身出现的规则,而不是SVG被嵌入网页后被附加上去的规则样式。然而,如果你想从CSS属性来了解SVG,比较他们的语法规则是一种有效果的方法。 SVG 等效的CSS fill background-color或color fill-opacity background-color或color设置rgba/hsla opacity opacity stroke border-color stroke-width border-thickness stroke-opacity border-color设置… Read More

SVG 入门教程系列列表 (含视频)

SVG 入门教程系列列表: SVG 教程 (一) SVG 教程 (二)矩形 SVG 教程 (三)圆形,椭圆,直线 SVG 教程 (四)多边形,曲线,路径 SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果 SVG 教程 (六)SVG 阴影,SVG 渐变 – 线性,SVG 渐变- 放射性 SVG 教程 (七)SVG 实例,SVG 参考手册 更多参考: SVG动画入门 SVG动画入门(二) SVG技术入门:线条动画实现原理 如何使用CSS来修改SVG原点和制作SVG动画 纯CSS实现帅气的SVG路径描边动画效果 SVG矢量绘图 path路径详解(基本画法) SVG矢量绘图 path路径详解(贝塞尔曲线及平滑) Web流程图绘制使用raphael   本… Read More

CSS3: 动画循环执行(带延迟)的实现

出处:http://www.cnblogs.com/starof/p/5443445.html 一、最终效果 需求:gift图片的小动画每隔2s执行一次。 需求就一句话,我们看一下实现过程。 二、实现过程 1、网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { display: inline-block; background-color: #cc2222; text-decoration: none… Read More

CSS3: 常用动画特效及4个最流行的动画库

一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查看演示: https://daneden.github.io/animate.css/  github地址: https://github.com/daneden/animate.css 直接下载:animate.css-master  二、magic.css动画库 查看演示: http://www.17sucai.com/pins/… Read More