`
leeight
  • 浏览: 23546 次
社区版块
存档分类
最新评论

非常漂亮的CSS格式，可以和图片媲美

CSS交通Microsoft 
阅读更多

<html>
<head>
<style>
.a
{
BORDER:#bfceff 1px solid;
height:18;
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#ddecfb',endColorStr='#ffffff');
width:180;
}
.b
{
BORDER: #bfceff 1px solid;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
FONT-SIZE: 12px;
HEIGHT: 100px;
width:180;
Font-Family: Courier New;
Font-Size: 15px;
border-top:0;
} </style>
</head>
<body>
<div class="a">&nbsp;</div>
<div  class="b">Hello World!@</div>
</body>

<html>
<head>
<style>
.a
{
BORDER:#bfceff 1px solid;
height:18;
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#ddecfb',endColorStr='#ffffff');
width:180;
}
.b
{
BORDER: #bfceff 1px solid;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
FONT-SIZE: 12px;
HEIGHT: 100px;
width:180;
Font-Family: Courier New;
Font-Size: 15px;
border-top:0;
} </style>
</head>
<body>
<div class="a">&nbsp;</div>
<div  class="b">Hello World!@</div>
</body>

效果<style type="text/css">.a{BORDER:#bfceff 1px solid;height:18;FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#ddecfb',endColorStr='#ffffff');width:180;}.b{BORDER: #bfceff 1px solid;PADDING-TOP: 10px; PADDING-LEFT: 10px;FONT-SIZE: 12px;HEIGHT: 100px;width:180;Font-Family: Courier New;Font-Size: 15px;border-top:0;}.biaoti{ FONT-SIZE: 18pt; FILTER: glow(color=000000,strength=2) dropshadow(color=#3333FF,offx=1, offy=1, positive=2); MARGIN: 0px; COLOR: #ffffff; HEIGHT: 20px; TEXT-DECORATION: none}</style>

 
Hello World!@

投影效果的文字

.biaoti{
      FONT-SIZE: 18pt; FILTER: glow(color=000000,strength=2) dropshadow(color=#3333FF,offx=1, offy=1, positive=2); MARGIN: 0px; COLOR: #ffffff; HEIGHT: 20px; TEXT-DECORATION: none
}
<div class="biaoti">西安交通大学软件学院</div>

效果

西安交通大学软件学院

更多的效果

<table border=0 style="border-style: solid; border-width: 1;font-size=12px" width="520">
  <tr>
    <td width="510">
    <span style="font-size:30pt;display:block;
             text-align:center;color:blue;
             filter:glow(color=red,strength=10);height:1">西安交通大学软件学院  </span></td>
  </tr>
  <tr>
    <td width="510">
    <span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:blur(add=t,direction=135,strength=10);height:1">西安交通大学软件学院</span></td>
  </tr>
  <tr>
    <td width="510">
<div style="color:red;font-size:25pt;height:1;display:block;
filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)">
        <p align="center"> 西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="height:1;width:100%;
   font-family:impact;font-size:30pt;color:navy;display:block;
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3)">
        <p align="center"> 西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="height:1;width:100%;
   font-family:impact;font-size:30pt;color:navy;display:block;
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)">
        <p align="center"> 西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);
             height:1">西安交通大学软件学院</span></td>
  </tr>
  <tr>
    <td width="510">
<span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:shadow(color=blue);height:1">西安交通大学软件学院</span></td>
  </tr>
  <tr>
    <td width="510">
<div align="center" style="height:1;font-size:30pt;
 filter:dropshadow(color=maroon,positive=1);">西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<div align="center" style="height:1;font-size:30pt;
 filter:dropshadow(color=maroon,positive=0);">西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5);
 height:1;font-size:20pt;font-family:impact;background-color:blue">
        <p align="center">SUNNY</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5);
 height:1;font-family:impact;font-size:20pt;background-color:blue">
        <p align="center">SUNNY</div></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font color="blue" size="6"><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)" align="center"><font color="blue" size="6"><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font  color="blue" size="6"><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font  color=#E1E4EC size=6><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font 
color=#8C96B5 size=6><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height=54><font color=#8C96B5 size=6><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td><span style="position:absolute;font-size:30pt;color=blue;filter:fliph">西安交通大学软件学院</span></td>
  </tr>
  <tr>
    <td><span style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv">西安交通大学软件学院</span></td>
  </tr>
</table>
<table align=center  border=0>
  <tr>
    <td style="FILTER: glow(strength=4)mask(color=#E1E4EC)"><font size="7"> <b>西安交通大学软件学院</b></font></td>
  </tr>
</table>

效果

西安交通大学软件学院
西安交通大学软件学院

西安交通大学软件学院

西安交通大学软件学院

西安交通大学软件学院

西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院

SUNNY

SUNNY

西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院



分享到：
| [转载]DotNet技术精华帖
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    超强JS+css相册完美效果堪比QQ空间

    在本项目中，我们主要探讨如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 来创建一个功能强大且美观的相册，其效果可媲美QQ空间的相册展示。这个相册不仅具备基本的图片浏览功能，还提供了一些便利的交互...

    JavaScript实现Flash【敢于和Flash媲美】

    JavaScript，作为一种广泛应用于网页开发的脚本语言，近年来在实现动态效果和交互方面已经发展得相当成熟，甚至在某些方面可以与曾经流行的Adobe Flash相媲美。本项目以"JavaScript实现Flash【敢于和Flash媲美】"为...

    构建iPhone企业级应用-基于HTML,CSS和JavaScript

    标题中的“构建iPhone企业级应用-基于HTML,CSS和JavaScript”揭示了本主题的核心内容，即使用Web技术（HTML、CSS和JavaScript）来开发适用于iPhone的企业级应用程序。这种开发方式通常被称为混合应用开发，它结合了...

    javascript 做的图片展示

    6. 自适应布局：为了保证在不同设备和分辨率下的良好显示，JavaScript可以配合CSS媒体查询，实现图片尺寸的自适应调整。这样无论用户使用桌面电脑还是移动设备，都能看到合适的图片大小。 7. 图片懒加载：在大型...

    HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站代码

    CSS3还引入了边框半径、阴影、渐变、多列布局、动画和过渡效果等，这些特性让设计师可以创造出更具视觉冲击力的网页。例如，使用`transition`和`animation`可以实现平滑的动态效果，而`flexbox`和`grid`布局则让响应...

    DreamWeaver图片按钮

    【DreamWeaver图片按钮】是网页设计中一种增强交互性和美观性的技巧，它可以用来创建具有独特视觉效果的按钮，效果可以媲美Flash按钮。在DreamWeaver中制作图片按钮，可以使网页更加生动活泼，吸引用户的注意力，...

    JavaScript_潜入顺风CSS的世界，建立一个耐克网站，并加入像OpenAI Shopify和NASA这样的顶级组织

    总的来说，JavaScript是构建现代网页和应用程序的基础，它与CSS的结合可以创造出色的设计和互动体验。通过深入学习和实践，你将能够创建出与OpenAI、Shopify、NASA等顶尖组织相媲美的高质量网站。

    10个超绚的JavaScript特效（可与FLASH制作媲美）

    随着技术的发展，JavaScript已经不再局限于简单的表单验证，而是能够创建出令人惊叹的视觉效果，甚至可以与曾经流行的Flash动画相媲美。在"10个超绚的JavaScript特效"这个主题中，我们将探讨这些特效是如何通过...

    苹果效果图片浏览器 By JS

    【苹果效果图片浏览器 By JS】是一款使用纯JavaScript编写的网页应用...这种应用展示了前端开发者如何利用Web技术创造出与原生应用相媲美的体验，同时也体现了JavaScript在实现动态网页和增强用户体验方面的强大能力。

    令人震撼的图片展示效果

    2. **过渡动画**：JavaScript配合CSS3的过渡和动画效果，可以制作出平滑的图片淡入淡出、滑动等特效。例如，使用`transition`属性设置过渡效果，`transform`属性实现位移或缩放。 3. **响应式设计**：JavaScript...

    jquery图片特效

    总结来说，"jquery图片特效"是前端开发中的重要技能，通过巧妙运用jQuery及其插件，我们可以创建出媲美Flash的动态图片展示效果，如"jquery卡地亚首页图片切换效果"。同时，关注性能优化和用户体验，是打造高质量...

    10款能与flash效果相比拼得js图片展示代码

    综上所述，JavaScript在图片展示方面具有极大的灵活性和创新性，可以实现与Flash效果相媲美的动态效果，甚至超越其功能，为网页设计带来了无尽的可能性。这些技术和库的运用，使得网站的图片展示更加生动、互动且...

    使用H5/JS/CSS 套壳法编写的移动端仿铛铛APP

    标题中的“使用H5/JS/CSS 套壳法编写的移动端仿铛铛APP”意味着这个...通过HTML5、JavaScript和CSS的组合，开发者可以在不编写原生代码的情况下，实现一个与原生应用相媲美的铛铛APP复制品，适用于多种移动操作系统。

    jQuery仿唯品会平滑旋转图片叠加切换效果

    在本项目中，我们将探讨如何使用jQuery来实现一个仿照唯品会的平滑旋转图片叠加切换效果。这种效果在电商网站中非常常见，...通过不断实践和优化，你可以打造出一个既美观又流畅的图片切换效果，与唯品会的效果相媲美。

    网页类别编辑器，与搜狐媲美

    5. **多媒体支持**：支持上传和插入图片、视频、音频等多媒体元素，提供一键优化和格式转换功能，确保网页加载速度和兼容性。 6. **版本控制**：具备版本管理功能，可以保存并追踪页面的历史版本，方便用户回溯和...

    JavaScript FLASH图片幻灯切换效果

    要使用JavaScript实现这些效果，我们可以利用CSS3的动画和过渡属性，结合JavaScript的事件监听和定时器功能。 首先，我们需要创建一个包含所有图片的HTML结构，例如： ```html &lt;!-- 更多图片... --&gt; ``` ...

    FCKeditor+java超炫相册

    【FCKeditor+Java超炫相册】是一个利用FCKeditor和Java技术开发的网络相册应用，旨在提供与主流网站相媲美的用户体验。FCKeditor是一个强大的富文本编辑器，而Java则作为后端语言处理数据和业务逻辑。这个项目不仅...

    12款超酷图片展示JS代码演示

    6. **3D效果**：利用CSS3和JavaScript实现的3D旋转、翻转等效果，让图片展示更具立体感。 7. **延迟加载**：仅当图片进入浏览器可视区域时才加载，有效减少页面加载时间。 8. **触摸事件支持**：为触屏设备优化，...

    iphone webkit

    这包括减少HTTP请求、压缩资源、优化CSS和JavaScript代码、使用适当的图片格式以及合理使用Web Workers等。 总结来说，iPhone上的WebKit是实现高质量移动Web体验的关键技术，它结合了KHTML和JavaScriptCore的优势，...

Magicbox
Global site tag (gtag.js) - Google Analytics