Chris Coyier

制作一个真正优秀的 CSS 精灵图像通常不是一件微不足道的事情。有很多工具可以帮助你完成它。我最喜欢其中之一是 SpriteMe。我在这里描述了使用它的典型工作流程 这里。精灵……

HTML5 有一堆特定于表单的功能，这些功能使 Web 上的表单变得更好。浏览器对这些功能的支持参差不齐，但许多功能可以被视为渐进增强，因此如果它……

假设你有一个链接可以显示更多选项，这些选项会扩展选项列表。它显示为“更多选项”。使用 .toggle() 或 .slideToggle() 切换这些选项很容易，但文本保持不变。要切换文本……

<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL

// Check tagslug.png exists and display it
if ($posttags) {
 foreach($posttags as $tag) {
       $image = "/images/tag-images/$tag->slug.png";

       if (file_exists("images/tag-images/$tag->slug.png")) {
         echo '<a href="' . $home 

…

来自 Joshua Johnson 的大量示例和信息……

(function() {
    
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, 

…

<div class="hexagon"><span></span></div>

.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
}

.hexagon, 
.hexagon:before, 
.hexagon:after {
  background: red;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);   
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  left: 22px;
  width: 57px;
  height: 57px;
  transform: rotate(145deg) skew(22.5deg);
}

…

#example-gradient {
  height: 200px;
  margin: 0 0 20px 0;
  background-color: #eaeaea;
  background-size: 20px 20px;
  background-image:
     -webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 

…

大多数 Web 分析软件中你得到的唯一统计数据是屏幕分辨率。但很有可能你刚刚用一个未打开到显示器全尺寸的浏览器阅读了这句话。如果你正在查看网站的大小分析，浏览器大小要相关得多。在这篇文章中，我们找出如何获取这些数据，然后查看从 css-tricks.com 收集的一些结果。