css trick

以前我一直觉得css负责样式,js负责交互,html是内容,他们应该各司其责,互不干涉。

后来我发现有些东西只用单一的一样完全达不到效果,这些语言并非我们想象的那么完善。

以前我看见一个水平分割线,我会把它当做上面的下边框或下面的上边框对待。现在我会把它看成一条线,用一个div或其他标签标记出来。现在你会在我的代码中看到较多的这种为了样式多写出来的HTML。只是为了方便重用,而且看上去一目了然。

我还记得项目中有个视频从小变大的那一块,变大后自动播放,由于视频涉及到了Flash和video标签,在有限的时间内我没精力将两者统一,尺寸的变化一直搞不定,后来的实现方案是用一张图片代替播放器从小变到大,结束尺寸变化后在播放,你会问,别人看不出来这是张图片吗?确实看不出来,没人会去点击一张看起来像播放器而且正在改变大小的图片。

有的时候一个标题随着设备的尺寸而变化大小(响应式),会出现长度过长分成两行的情况,很难看。

后来没办法采用了图片。你会说,图片多大啊,多耗流量啊,但有时候,客户在意的并不是这个,他们在意视觉表现。我见过太多客户会因为一个像素和你撕B。。

设计师的天马行空,当然是让人享受的一件事情,有些网站的设计图真的是一件艺术品。但遗憾的是,因为浏览器的问题(ie8快点去死一死),有太多效果没办法实现。有的时候我真想把整个图片放上去,不用coding,简单而又享受。但实际项目中可以这么做的少之又少,多语言、响应式、还没涉及到后台什么的,你不得不重新构思整个网站,最后却发现自己不能完美的实现它。

It‘s magic and art, but a majority of us think it‘s just a work of coding, we droped in code and had any fun of it.

时间: 2024-12-24 05:26:42

css trick的相关文章

CSS利用filter/opacity实现背景透明

设计师为了突出网页的层次感,往往会采用一些半透明的元素,但对于前端实现起来可 不是那么简单,看下图两边的左右按钮 先看看众所周知的解决方案 如果我们想要一个半透明背景,有两种实现方式: 1.利用CSS和opacity属性 .opacity { filter:alpha(opacity=50);/*IE浏览器*/ opacity: 0.5;/*非IE浏览器*/ } 复制代码 2.建立一个24位PNG背景图片 第一种利用opacity的问题除了 需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素

CSS 中,用 float 和 position 的区别是什么?

呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果.float从字面上的意思就是浮动,这种在印刷排版之类中可能解释的更加贴切.float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.并且float这也是目前使用最多的网页布局方式.不过需要注意的是清除浮动是你可能需要注意的地方.并且如果你要考虑到古老的IE6

Web 设计新趋势: 使用 SVG 代替 Web Icon Font

如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法. 这篇文章列举了目前 SVG 比较常见的使用方法. 关于使用 Icon Font 的缺陷,这篇来自 CSS Trick 的 <Inline SVG vs Icon Font> 可谓是总结的相当全面了.在我看来,Icon Font 的主要缺陷有以下几条: 浏览器将其视为文字进行抗锯齿优化,有时得到

trick:CSS 3+checkbox实现JQuery的6个基本动画效果

在JQuery中,有六个基本动画函数:show()/hide().fadeIn()/fadeOut().slideUp()/slideDown().这篇文章,就利用CSS3+checkbox实现这六个基本动画. show()/hide()的实现 show()/hide()的实现主要控制元素的display属性. html: <div id="box"> <input type="checkbox" id="sh"/> &l

Designing CSS Layouts With Flexbox Is As Easy As Pie

This article is an updated excerpt of the chapter "Restyle, Recode, Reimagine With CSS3″ from our Smashing Book #3, written by Lea Verou and David Storey. - Ed. Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of th

CSS如何实现长宽比?

本文和大家分享的主要是css中实现长宽比的几种方法,一起来看看吧,希望对大家学习css有所帮助. 长宽比故事 长宽比在影视制作中又被称之为 宽高比 ,指的是一个视频的宽度除以它的高度所得到的比例,通常表示为 x:y 或 x×y ,其中的冒号和叉号表示中文的"比"之意.目前,在电影工业中最常被使用的是anamorphic比例(即 2.39:1 ).传统的 4:3 仍然被使用于现今的许多电视画面上,而它成功的后继规格 16:9 则被用于高清晰度电视或数字电视上.常见的比例: HTML结构

实现&lt;div&gt;高度最大化的纯css方案

<html> <head> <style type="text/css"> html, body { height: 100%; margin: 0px; } /* this is the big trick*/ #wrapper:before { content:''; float: left; height: 100%; } #wrapper { height: 100%; background-color: black; color: whit

纯css实现3D字体

下面分别是html,css和js代码: <div class="wrapper"> <h1 contenteditable data-heading="Folded">Folded</h1> </div> $bg: #e6e2df; html, body { height: 100%; } body { background: linear-gradient(45deg, $bg 80%,#c2c1bd 100%);

[译]CSS content

原文地址:http://css-tricks.com/css-content/ CSS中有一个属性content,只能和伪元素:before和:after一起使用,他们的写法像伪类选择器(前面有冒号),但是他们并不能选择页面上的任何元素,却可以往页面上添加一些东西,通常这样来写: .email-address:before { content: "Email address: "; } 我们把这段CSS代码放到下面的HTML中: <ul> <li class=&quo