使用特殊效果建立乙個堆疊紙張對登入表單

2021-09-06 05:24:03 字數 4113 閱讀 1332

登入形式是任何動態**的乙個重要組成部分。他們為**使用者提供了一種機制來訪問受限制的內容(比方 會員的賬戶啊,敏感的資訊啊,什麼的)。今天,我將做乙個包含很多像文字陰影,陰影框,線性漸變和過渡的特效的建立乙個堆疊紙外觀與古樸典雅的登入表單。最終做出來的效果如下所示

html標記我們將使用符合html5屬性的標記來宣告,裡面包含和標記在bod標籤內,當然其中肯定也要有乙個section標籤 ,這個標籤來定義內容的寬度和對齊方式,我們也定義乙個css樣式通過給來具體的控制樣式,然後在正文內容新增乙個標籤,增加兩個input文字框,分別是郵件和密碼 通過乙個sumbit提交按鈕來提交,值得注意的的是我們把 input type="email"屬性,這是html5當中的宣告,並且在舊的瀏覽器當中他會自動轉換成符合舊瀏覽器的屬性

建立的html**如下

建立完之後的樣式預覽

建立乙個新的css樣式檔案命名為master.css,在這個css檔案當中要我要建立一些基本的css定義,包含body的背景,對各種瀏覽器的相容性**,在這個例子當中我使用開放的sans 字型關於這個字型,你可以訪問谷歌的web字型 如下面的**定義了body和html屬性

1

/* --------base styles--------- */

2body, html 67

body

1112

div.wrap

這個是最重要的一部分css**效果了

現在是開始基本的布局了,我先設計乙個**,獲得疊紙的效果,我將使用將使用:after:before偽元素。這些偽元素大多用於視覺效果;

偽元素:before 被用作要展現的選擇的內容之前,偽元素:after就不用說了吧,^^

給seciton元素定義乙個 stacked的類,規定 寬度是400px 高度是300px,此外將登入框的背景顏色設為較深的灰色#f6f6f6,邊框設為1px顏色是#bbb,(效果可以自己看看),這裡最最要的還是邊界半徑的渲染和陰影效果,不過我這裡用"-moz-"和"-webkit-"字首屬性定義他們在不同瀏覽器的顯示效果,哈哈

邊界半徑 border-radius宣告非常簡單,用於建立圓角,寬度是3px。box-shadow框陰影宣告的語法寫起來複雜,將要乙個個的定義,廢話少說,css**如下

1

/* --------border radius--------- */

2-webkit-border-radius: 3px;

3-moz-border-radius: 3px;

4border-radius: 3px; 56

/* --------box shadow--------- */

7-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);

8-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);

9 box-shadow: 0 0 3px rgba(0,0,0,.2);

上面的css**x和y座標的偏移量是3px,其次是陰影顏色的宣告,

1

.stacked

現在,我們已經創造了基本的邊界框的形式,下面開始建立偽元素前後的**

1

.stacked:after,

2.stacked:before

2021

.stacked:before

**:after和偽元素:before幾乎完全類似。唯一要注意的是,這些偽元素絕對定位與邊界框。每個偽元素逐步降低幾個畫素,來呈現一種疊紙的外觀

在html標記中,我新增了乙個「文字輸入」的電子郵件欄位和密碼欄位的類,下面對這些類進行宣告

1

form input.text-input

在這裡,我再次使用邊界半徑和陰影宣告。在文字欄位的情況下,邊界半徑被賦予了更高的畫素,以確保更多的曲率。

我要完成的最後一部分是submit按鈕。輸入字段類似,我會提交「按鈕的使用邊界半徑屬性25px。乙個box-shadow屬性與y-偏移量為1px,還新增了乙個「內陰影」的效果.css**如下

1

form input[type='submit']

如何建立乙個類只能在堆(棧)上建立物件

在c 中,類物件的建立方式有兩種,一種是靜態建立類物件,如a a 另一種是動態建立類物件,如a p new a 這兩種方式是有區別的 靜態建立類物件 是指全域性物件,靜態物件,以及分配在棧區域內的物件,編譯器對它們的記憶體分配是在編譯階段就完成的,是通過直接移動棧頂指標,挪出適當的空間,然後在這片記...

使用gulp建立乙個專案

npm init y 本地安裝gulp 全域性已經安裝過了 npm init y g 全域性安裝gulp 建立 gulpfile.js 檔案 gulpfile.js var gulp require gulp 引入gulp npm i gulp webserver d 安裝伺服器 var webse...

php怎麼使用物件,php中如何建立乙個物件呢?

摘要 下文講述php中建立物件的方法分享,如下所示 我們都知道物件是由類初始化而成的,那麼如何將乙個類初始化為乙個物件呢?下文將一一道來,如下所示 實現思路 使用new關鍵字 即可將乙個類例項化為乙個物件 例 php中建立物件的示例 定義類 class phptestclass 成員變數 var w...