在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面建立和载入一个图像,而不是为每一个按钮建立各自的图像。同一个图像可以使用在网页所有按钮的背景。按钮的文本标签都是简单的CSS风格文本。预先载入的图形/CSS混合风格的为数不多问题之一是对翻滚效果有所限制。使用这一技术的最简单的方法是,指定CSS风格文本的翻滚效果,并使用所有翻滚状态(rollover states)的相同按钮外形图像。这可以给你带来快速、简洁的翻滚效果,但在一定程度上限制了你的开发选项。你也可以建立一些可交替使用的按钮图像并构建你的CSS规则,以为不同的翻滚状态改变背景图像。然而,这些方法给你带来更多灵活的设计,但当浏览器首次载入图像文件时,这些可交替使用的铵钮图像会出现延迟现象(除非你采用预先载入按钮图像的方法)。预先载入图像技术已被人熟知,而且也被人们所接受。问题是预先载入图像增加了网页载入和出现在访问者浏览器的时间。用户访问的第一二分钟非常关键,所以你无论如何都必须使得网页的初始化更加快速。使用图形/CSS混合按钮可以减少图像预先载入的时间,当然如果预先载入能够消除,页面的初始化则更加快速。没有延迟的翻滚──不使用预先载入图像我已经找到一种创新的方法,这种方法可以满足不同的翻滚状态的可交替使用的按钮图像,而其中不需要任何图像文件的载入。我第一次接触这一技术是在网络设计者捷克人Petr Stanicek的站点上的文章上发现的。为了获得一个典型的按钮翻滚效果,你通常需要建立三个独立的图像,如图A所示。其中一个是普通的按钮,一个是悬浮状态,以及一个是激活状态。普通按钮的图像文件将成为初始化页面载入的一部分,但其它两个图像将被分开地载入,这样使得它们能够在用户的浏览器中得以使用。无预先载入翻滚技术通过结合所有三个按钮外表图像而成为单一图像文件而得以实现,如图B所示。然而,不需要为每一翻滚状态指定不同的背景图像文件,你指定的是合成图像的位置偏移量。在页面初始化载入过程中,合成图像文件能够自动地载入,所以无需要预先载入;而且,在浏览器获得不同图像文件过程中也没有时间上的延迟。超大图像与背景图像位置偏移的结合使用可以使你有选择性地为每一按钮状态显示图像的不同部分。按钮文本的CSS框尺寸决定着显示在浏览器的背景图像的百分比。对于这一技术,你必须清楚按钮外表的确切水平和垂直尺寸,并正确使用这些尺寸,才能建立图像文件和按钮的CSS规则。
用CSS风格的文本和图形构建网页实用按钮
来源:互联网 发布日期:2016-03-25 16:39:54 浏览:1820次
相关内容
- 除了7万亿美元,奥特曼重塑芯片业的雄心还面临三大挑战
- 先台积电一步,三星已斩获首个 2nm 工艺芯片订单
- 硅谷大佬怎么看脑机接口技术?扎克伯格:我不会“第一个吃螃蟹”
- 革命性创新:如何通过医疗互联网彻底改善患者的就医体验?
- M4芯片将专注于AI!苹果据称拟全面升级Mac产品线,股价涨超4%
- AI芯片项目面临多个难关 奥尔特曼据称正寻求美国政府批准
- 科技创新是发展新质生产力的核心要素
- 台地震影响全球半导体格局?分析称可能会让供应链多元化呼声更强烈
- 继OpenAI之后,微软“鲸吞”288亿估值的全球第四大AIGC独角兽
- 字节、百度、阿里,为这块芯片抢破了头
- 纳米缝合让复合材料更轻更坚韧
- 脑机接口技术取得新突破 产业化有望再提速
- 对话东方晶源:打造中国芯片制造的GoldenFlow
- 英伟达黄仁勋回应 AI 芯片定价问题,强调中国市场重要性
- 英特尔展示多模块芯片,预计为 Gaudi 3 人工智能加速器
- 被科技巨头押注,Figure AI创始人是“马斯克2.0”?
- 英特尔突袭英伟达H100,新AI芯片训练快40%,推理快50%,CEO蹦迪庆祝
- 又一AI爆款应用!字节Gauth在美国走红 数理化多科目“全能辅导”
- 英特尔携手微软定义AI PC标准:要有NPU和Copilot物理按键!
- 可控核聚变公司MIFTI实现1500亿个中子产量,助力生产可持续清洁能源
AiLab云推荐
最新资讯
- 纳米缝合让复合材料更轻更坚韧
- Meta全新自研AI芯片曝光:性能相比MTIA v1提升了3倍!
- M4芯片将专注于AI!苹果据称拟全面升级Mac产品线,股价涨超4%
- 英特尔甩出全新AI训练芯片!跑千亿大模型速度超H200,罕见披露AI浮点性能
- 英特尔突袭英伟达H100,新AI芯片训练快40%,推理快50%,CEO蹦迪庆祝
- 对话东方晶源:打造中国芯片制造的GoldenFlow
- 一颗改变了世界的芯片
- 英特尔展示多模块芯片,预计为 Gaudi 3 人工智能加速器
- 台地震影响全球半导体格局?分析称可能会让供应链多元化呼声更强烈
- 三星 Exynos 2500 芯片再爆料:加码NPU芯片,构建更丰富 AI 体验
本月热点
热门排行
-
ChatGPT 设计了一款芯片
阅读量:193800
-
2023年全球风投额创5年最低,机构:今年会有更多创业公司倒闭
阅读量:192584
-
计算效率提升超60倍!中国公司杉数科技用GPU芯片开启运筹学新的“大航海时代”|钛媒体焦点
阅读量:188567
-
2023,AI创业者的50条反思
阅读量:100393
-
专访清华大学脑机接口科研团队负责人:中美“脑机接口”下一突破是什么?
阅读量:61297
-
2024,AI芯片之争加剧
阅读量:23443
推荐内容
- 2024第三十二届中国(深圳)国际礼品及家居用品展览会(深圳礼品展)
- 2024第二十届中国(上海)国际医疗旅游展览会
- 2024年科隆东盟少儿用品展览会 (Kind+Jugen ASEAN 2024)
- 2024中国(太原)国际锂电池技术设备展览会
- 海名·2024第九届西安餐饮供应链博览会
- 2024年盐城风能展
- 2024年中国风电展业大会暨展览会
- 2024第二十三届浙江国际智能楼宇技术与智慧安防产品展览会暨浙江(杭州)国际人工智能,物联网,大数据博览会(杭州智博会)
- 2024年中国郑州食品加工及包装机械展
- IOTE 2024第二十一届中国国际物联网博览会(上海站)
- 2024年日本东京IT展Japan IT Week Spring
- 2024越南国际采矿暨设备技术展览会暨2024越南建筑工程展览会
- 2024年第28届土耳其国际电力及能源展览会 土耳其输配电机电工展览会
- 2024年第28届土耳其国际电力及能源展览会
- 2024第三十二届中国国际电子生产设备暨微电子工业展(NEPCON China)
- 2024第十四届中国西部国际物流产业博览会 第八届中国(西安)智慧交通博览会
- 第四届中国国际数字产品博览会
- 2024年俄罗斯第23届国际石油和天然气工业设备及技术展览会
- 2024年法国巴黎国际工程机械展
- 2024年俄罗斯电力电工及电气工程展览会
- 2024江苏国际工业自动化及智能装配展览会
- 2024石家庄印刷出版博览会
- 2024年第36届俄罗斯国际通信展览会
- 第36届俄罗斯国际通信展(SVIAZ 2024)
- 2024第45届中国(江西)美博会 江西中医养生理疗及大健康博览会
- 2024年德国“汉诺威工业博览会”
- 2024韩国国际机械展