css黑魔法简略版

利用css伪类的content属性来输入文本

  • 思路来源 鼠标浮动显示文字
<div data-msg="Open this file in Github Desktop">hover</div>
div{
    width:100px;
    border:1px solid red;  
    position:relative;
}
div:hover:after{
    content:attr(data-msg);
    position:absolute;
    font-size: 12px;
    width:200%;
    line-height:30px;
    text-align:center;
    left:0;
    top:25px;
    border:1px solid green;
}

利用伪类实现表单校验的反馈样式

  • :required伪类指定具有必填项属性的表单
  • :valid伪类指定一个通过匹配要求的表单元素(结合type使用)
  • :invalid伪类指定某一未通过匹配要求的元素
<form>
    <div class="form-group">
        <label>name</label>
        <input type="text" required placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label>email</label>
        <input type="email" required placeholder="请输入邮箱">
    </div>
    <div class="form-group">
        <label>homepage</label>
        <input type="url" placeholder="请输入博客url">
    </div>
</form>
.valid {
  border-color: #429032;
  box-shadow: inset 5px 0 0 #429032;
}

.invalid {
  border-color: #D61D1D;
  box-shadow: inset 5px 0 0 #D61D1D;
}

.form-group {
  width: 32rem;
  padding: 1rem;
  border: 1px solid transparent;
  &:hover {
    border-color: #eee;
    transition: border .2s;
  }
  label {
    display: block;
    font-weight: normal;
  }
  input{
    display: block;
    width: 100%;
    line-height: 2rem;
    padding: .5rem .5rem .5rem 1rem;
    border: 1px solid #ccc;
    outline: none;
    &:valid {
      @extend .valid;
    }
    &:invalid {
      @extend .invalid;
    } 
  }
}

nth-of-type选择器

tr: nth-of-type(2n) {
    background-color: red;
}
tr: nth-of-type(2n+1) {
    background-color: green;
}
tr:nth-child(n+5):nth-child(-n+10) {
    /* 选择5-10子元素? */
}

实现鼠标悬浮内容自动撑开的过渡动画

通过max-height来实现transition所需的具体高度来hack实现

<ul>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
</ul>
.bd {
  max-height:0;
  overflow:hidden;
  transition: all 1s ease-out;
}
li:hover .bd {
  max-height: 600px;
  transition-timing-function: ease-in;
}

rem布局不在使用JavaScript设置

有时候,移动端用rem布局时候,根据不同的屏幕宽度要设置不同的font-size来做到适配,要写一坨JS来设置,能不能不用JS呢?(以750px设计稿为基准,font-size设置为100px 只考虑DRP=2)

  • 原有的js实现代码: (
- 一行代码的`css`实现: (`html{font-size: calc(100vw / 7.5)}`)

## 利用`transparent`属性实现各种三角形/提示框

> [推荐链接](https://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html)

```css
#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

如果项目中遇到,建议做成通用的宏,方便在项目各处调用

实现文字的波浪线效果

需求如下图所示: 波浪线

基本思路:截取’X’的上半部分得到一个’V’,再结合repeat生成波浪线,下面是scss的mixin(注意linear-gradient的兼容性)

@mixin waveline($color,$h) {
    position: relative;
    &::after {
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: $h;
        background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
                    linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
        background-size: $h * 2 $h * 2;
    }
}

使用效果: 波浪线效果

一些非常简单的css技术

  1. CSS实现文字两段对齐(text-align-last: justify)
  2. ios支持弹性滚动(body{-webkit-overflow-scrolling: touch;})
  3. 改变input光标颜色:
    • 对所有input元素添加样式caret-color: auto;
    • 特定的input元素添加样式caret-color: red;
  4. 图片黑白效果(filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);)
  5. css奇技淫巧 github地址 blog地址
  6. CSS radio/checkbox单复选框元素显隐技术张鑫旭大神博客

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

css 使元素居中

<div style="text-align:center;">居中显示</div>

1354
来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

2675
来自专栏我和未来有约会

CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1908
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

2263
来自专栏何俊林

打造狂拽炫酷的主流自定义侧滑控件(仿酷狗和QQ5.0)

前言:自定义侧滑控件是一直是很多在app端的软件用的比较多的方式,本文来自 Mero技术博客授权本公众号独家发布文章,Mero技术博客blog地址:http:/...

21210
来自专栏C/C++基础

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示:

1211
来自专栏企鹅号快讯

Web前端知识体系精简——CSS 篇

css是用来对html进行修饰的一门语言。 1、选择器 css的选择器有很多种,常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(b...

2318
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

1144
来自专栏流柯技术学院

selenium截取具体元素图片(python版)

element = driver.find_element_by_id("xx")

1111
来自专栏河湾欢儿的专栏

(第一版)知识点

1102

扫码关注云+社区

领取腾讯云代金券