CSS3实例教程代码:简单制作遨游浏览器LOGO

文章简介:CSS3实例教程代码:简单制作遨游浏览器LOGO。

<!DOCTYPE HTML>
 
<html>
 
<head>
 
<title>LOGO</title>
 
<style type="text/css">
 
* {margin:0; padding:0}
 
.main {width:800px; margin:50px auto 0}
 

.main_wrapper {width:240px; height:240px; border-radius:120px; background:#B1E4FF; border:2px solid #789CB6; box-shadow:5px 5px 7px #999}
 
.main_wrap {width:230px; height:230px; border-radius:115px; position:relative; top:5px; left:5px; background:#3B99E3}
 
.white_a {width:150px; height:100px; background:#FFF; position:relative; left:42px; top:70px; border-radius:3px 20px 3px 3px}
 
.white_b {width:35px; height:45px; background:#FFF; position:relative; left:33px; top:30px; border:25px solid #3B99E3}
 

</style>
 
</head>
 
<body>
 
<div class="main">
 

<div class="main_wrapper">
 
        <div class="main_wrap">
 
                <div class="white_a">
 
                        <div class="white_b"></div>
 
                </div>
 
        </div>
 
</div>
 

</div>
 
</body>
 
</html>

时间: 2024-12-30 23:09:53

CSS3实例教程代码:简单制作遨游浏览器LOGO的相关文章

CSS3实例教程:盒模型添加阴影属性box

文章简介:我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 相关文章:CSS3教程:网页文字阴影属性text-shadow box-shadow: 此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个

CSS3实例教程:hover、active和:focus伪选择器

文章简介:CSS3实例教程:hover.active和:focus伪选择器. CSS3的伪类选择器就是多,今天我们来学习新的伪类选择器--UL状态伪类选择器.这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用,在默认状态下无效. 今天我们先来接触:hover.active和:focus这三种状态伪类选择器. :hover选择器.:active选择器和:focus选择器 :hover选择器:当鼠标悬停在所指定的元素上时所使用的样式: :active选择器:当所指定的元

Photoshop制作google浏览器logo图标

一篇详细的教程教你如何制作一个漂亮的logo. Begin working by creating a new file (File>New) of 854x854 px and 72 dpi. Use on it the Ellipse Tool (U) to represent the basis for the logotype to be of the Google Chrome browser. 先新建画布(文件>新建),大小854x854 px,分辨率72.用椭圆工具(U)画出一个

CSS3实例教程:用CSS代码绘制新浪LOGO

文章简介:用CSS3绘制小新. 新浪有两个吉祥物,小新是女孩儿,小浪是男孩儿.现在流行用CSS3画点什么,我们SINA CDC的模特儿,必然是小新和小浪了. 熬一晚上做了个小新头,不完善,还有更像的空间.窍门就是琢磨出用各种圆形,相互迭加而制作出一个物体.先看看最终效果吧.个人认为,firefox在图型方面的表现是最好的,而safari和chrome虽然有毛边,但优势是支持CSS动画.各有所长.而IE,就当它是打酱油的吧. 这次使用到的CSS3属性包括: 圆角:-moz-border-radiu

CSS3实例教程:CSS3下拉菜单代码解析

上个星期我发布了一篇CSS3下拉菜单,有人反映说我将CSS代码解释的不够详细.那么,这篇文章将会对新的CSS属性作出解释,包括:text-shadow,box-shadow和border-radius.这些CSS3属性是最常用到的,了解它们准没错. RGBA 前三个值是RGB颜色值,最后一个值表示透明程度(0代表完全透明,1代表完全不透明). RGBA可以应用于任何设计颜色的属性,例如文字颜色.边框颜色.背景颜色.阴影颜色等等. 文字阴影 文字阴影按照如下顺序组织:x-offset,y-offs

简单实用的ajax开发实例教程代码

// aien,i@ruboy.com,1034555083 // ajax(a,b,c,d,e,f,g); // 参数说明:a-请求方法:b-请求的地址:c-请求的数据,a为post时有效:d-回调函数,函数里面的this引用是xmlhttp对象:e-是否异步,除非设置为false,否则为异步调用:f,g-登录用户名和密码 function ajax(a,b,c,d,e,f,g){     a = a.touppercase();     if(e===false){e=false;}else

CSS3实例教程:详解calc()函数功能

文章描述:就算你通过繁琐的方法实现了,但有于浏览器的兼容性而导致最终效果不一致.虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题,其实今天的calc()函数功能实现上面的效果来得更简单. calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我

CSS实例教程: 网页中制作浮层叠加效果

文章简介:CSS Overlay技巧. 创建遮照图有几种技术:从使用绝对定位的元素到outline和伪元素.在本文中,我们将探索每个技术的实现样式以及他们之间的利与弊. 设计模式通常是一组最佳实践和技术,主要目的是用来解决一些最常见的设计"问题",通常是在上下文中提出的设计原则.这些原则之是一"停留在页面"的原则.这一原则是建立在页面刷新都打破用户的心中想要的流程基础上,造成所谓的"变盲",我们需要用户无论保时何地可以避免打破这种视觉流程. 我们

CSS3实例教程:详细讲解Clip属性

文章简介:我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在Drupal的主题之中,他们有一段用来隐藏文本的代码,就是使用的clip属性. Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果. 我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在Drupal的主题之中,他们有一段用来隐藏文本的代码,就是使用的clip属性. /* Hide only visually,