在改善圖像時,我們可以選擇使用Photoshop進行處理,然後將其安裝在網頁上,或者我們也可以選擇選項B: 使用可用的HTML,CSS和Javascript技術來做到這一點。
跳轉之後,有很多技術可以改善圖像,幾乎所有技術都是以jQuery為主要基礎或CSS3 利用最新的網絡標準,儘管我提醒您,在這種情況下,我們將失去與某些瀏覽器的兼容性。
他們用英語,但是他們被趕上了,答應了:)
來源| 第一輪
使用jQuery的CSS3舍入圖像
學習將span標籤包裹在image元素周圍,以獲取將在所有現代瀏覽器中正確顯示的圓形圖像。
2.
CSS 2.1具有多個背景和邊框
了解如何使用CSS 2.1偽元素為單個HTML元素提供多達3個背景畫布,2個固定大小的演示圖像以及多個複雜邊框。
3.
快速提示:使用簡單CSS的多個邊框
快速截屏視頻向您展示瞭如何使用簡單的CSS實現多個邊界,從而為設計增加了深度。 上一教程的簡化版本。
4.
使用CSS2動態調整元素的多個邊框
第三版 尼古拉斯·加拉格爾(Nicolas Gallagher) 告訴您如果沒有元素的大小該怎麼辦。
5.
帶邊框的樂趣-斜面,壓制及更多!
了解如何使用CSS和一些簡單的邊框樣式技巧來獲得逼真的效果,以獲取各種效果。
6.
寶麗來與CSS3
了解如何使用一些很棒的CSS2和CSS3將原本毫不張揚的圖像列表變成一組完整的寶麗來照片。
7.
完美的整頁背景圖片
了解如何使用CSS添加背景圖像,該CSS可以用圖像填充整個頁面,沒有空格,可以根據需要縮放圖像,不會引起滾動條等等。
8.
CSS3盒子陰影和圖像懸停效果
探索僅通過編輯樣式表即可添加陰影效果的新方法。
9.
花式縮略圖懸停效果,帶有jQuery
使用CSS和jQuery實現簡潔的Flash風格效果。
10.
如何創建簡單的CSS圖像翻轉效果
在本教程中,您將學習如何使用基本的HTML和CSS樣式創建簡單的CSS圖像翻轉效果。
11.
浮動的
Floatutorial指導您了解浮動元素的基礎知識,例如圖像,首字下沉,下一個和後退按鈕,圖像庫,嵌入式列表和多列佈局。 查看有關圖像浮動的4個教程。
12.
使用CSS的懸浮效果
在本教程中,您將學習使用CSS2.1屬性創建靈活的高級懸停技術。
13.
無快速翻滾
預載
使用CSS圖像翻轉時,必須加載兩個,三個或更多圖像(並且通常預先加載以獲得最佳結果)。 了解如何將所有狀態整合到一個映像中,從而使動態更改更快並且不需要預加載。
14.
jQuery圓角
圓角和更多圖案的許多jQuery效果。
15.
使用jQuery最簡單的工具提示和圖像預覽
請參閱3個使用jQuery滾動預覽腳本的示例。 這個簡單的腳本可以用於多種目的。
16.
超大-全屏背景/
幻燈片
jQuery插件
Superzided是一個jQuery插件,可調整圖像大小以填充瀏覽器,同時保持圖像尺寸比例,並通過帶有過渡和預加載的幻燈片放映來循環顯示圖像/背景。
17.
PNG疊加
您是否曾經遇到過用客戶提供的圖片創建站點的問題,後來又在他們更新照片後才發現原始外觀沒有保留? 該解決方案涉及創建一個透明的PNG覆蓋圖,該覆蓋圖可用作常規JPEG或GIF周圍的遮罩/框架。 這樣,可以配置典型的CMS安裝,以便用戶可以上傳照片,而不必擔心使用任何圖形程序來應用濾鏡。
18.
縮放
輕量級
JQuery的
縮放插件
BeZoom是一種簡單輕巧的替代品 傑青變焦。 它更輕巧,更易於使用。
19.
使用jQuery進行背景圖片動畫處理
使用jQuery並更改背景圖像的位置,以創建所需的效果類型。 有一篇新文章回答“如何處理活動狀態?” -- 處理jQuery動畫背景的活動狀態.
20.
用CSS豐富圖像的5種方法
這裡有一些簡單的技巧,可以為典型的平淡無奇的圖像增添些許風味。 從長遠來看,使用Photoshop設置每個圖像的樣式可能很繁瑣且難以維護。 以下這些CSS技術將幫助您減輕痛苦。
21.
如何:
可調整大小
背景圖
了解如何使用CSS設置可調整大小的背景圖片。 您有3個選項可供選擇。
22.
設置圖像鏈接的樣式
讓用戶知道我們網站的特定部分將被單擊,這最好通過鼠標懸停效果來實現。 這些“可點擊”部分當然包括內容圖像。 圖像鏈接是一個腳本,使您可以將其他樣式應用於圖像鏈接。
23.
使用CSS的多個背景圖片
有時,使用背景圖片比將背景圖片直接插入頁面更有意義。 儘管每個元素(如您的身體標籤)只能容納一個背景圖像,但它們可以應用於多個元素。
24.
CSS圖像邊框
真正簡單的教程,向您展示瞭如何使用CSS向圖像添加實心邊框。
25.
不使用背景圖片的CSS Sprite
了解如何在沒有大量關於CSS Sprite的知識的情況下應用懸停效果。