Nhóm 3 - OD10 - Topica: web | Your Blog Description

11:28

10 thư viện CSS cung cấp những hiệu ứng chuyển động hình ảnh tốt nhất

Ngày nay khi thiết kế website, các nhà thiết kế web thường quan tâm đến những hiệu ứng độc đáo, ấn tượng để có thể thu hút được người dùng truy cập và click vào trang web của bạn. Ngày nay với CSS, có rất nhiều cách khác nhau để cung cấp hiệu ứng chuyển động, đặc biệt là cho hình ảnh. Trong quá trình biên dịch, có hơn 250 hiệu ứng chuyển động để truyền cảm hứng cho bạn. Bạn cũng có thể lấy mã tại nguồn. Dưới đây sẽ là 10 thư viện CSS cung cấp những hiệu ứng chuyển động hình ảnh tốt nhất dành cho bạn.

Image Hover Effects

Trong trang này bạn sẽ tìm thấy một bộ sưu tập của 16 hiệu ứng hình ảnh di chuột có phụ đề. Grab các mã HTML và CSS cho từng hiệu ứng bằng cách di chuyển trên hình ảnh, sau đó nhấp vào show code .

Hình ảnh Caption Hover Animation (4 hiệu ứng)

Dưới đây là 4 hình ảnh động chú thích cực cool. Các hiệu ứng này được xây dựng với sự chuyển đổi CSS3 thuần , và không có JavaScript, tăng compability trên trình duyệt.

iHover (35 hiệu ứng)

iHover là một bộ sưu tập các hiệu ứng chuyển động chạy bằng CSS3. Có 20 hiệu ứng vòng tròn di chuột và 15 hiệu ứng hover vuông. Để sử dụng các hiệu ứng, bạn sẽ cần phải viết một số đánh dấu HTML và bao gồm các file CSS.

Imagehover (44 hiệu ứng)

Thư viện này chứa 44 hiệu ứng làm với CSS. Một số tác dụng bao gồm fades, pushes, slides, hinges, reveals, zooms, blurs, flips, folds và shutters trong nhiều hướng. Có một phiên bản mở rộng của 216 hiệu ứng có thể được mua với giá € 14.

Hover Effect Ideas (30 hiệu ứng)

Trang này giới thiệu hình ảnh di chuột được làm bằng Codrop, mang đến cho bạn cảm hứng khi thực hiện quá trình chuyển đổi trơn tru giữa các hình ảnh và chú thích của nó. Có tổng số 30 hiệu ứng trên hai bộ hướng dẫn và mã nguồn.

Hover CSS (108 hiệu ứng)

Hover CSS cho phép bạn thêm các hiệu ứng di chuột vào mọi yếu tố, chẳng hạn như một nút, liên kết hoặc hình ảnh. Các hiệu ứng bao gồm quá trình chuyển đổi 2D, quá trình chuyển đổi nền, biên giới, bóng, ánh sáng chuyển tiếp, và nhiều hơn nữa. Các thư viện có sẵn trong CSS, Sass, và LESS.

Animatism (100 hiệu ứng)

Hiện có hơn 100 hình ảnh di chuột hình ảnh động để nút, lớp phủ, chi tiết, chú thích, hình ảnh và các nút phương tiện truyền thông xã hội. Tất cả các hiệu ứng được cung cấp bởi CSS3.

Caption Hover Effect (7 hiệu ứng)

Có 7 hiệu ứng khác nhau trong bộ sưu tập này. Tất cả các quá trình chuyển đổi trông rất trơn tru và mịn màng. Tới các hướng dẫn phần để học cách áp dụng những hiệu ứng này vào dự án của bạn.

CSS Image Hover Effects (15 hiệu ứng)

Một bộ sưu tập các hiệu ứng chuyển động đơn giản như zoom, trượt, xoay, gray scale, độ mờ, độ mờ đục và các hiệu ứng cơ bản khác. Bạn có thể sử dụng những hiệu ứng này bằng cách thêm vào các lớp CSS.

Direction-aware 3D hover effect

Đây là một hiệu ứng di chuột siêu mát mẻ mà sẽ phát hiện chuyển động chuột cuối cùng của bạn. Các chú thích hình ảnh sẽ mở ra từ một trong bốn hướng dựa trên vị trí con trỏ cuối cùng của bạn.

Bbb

Hover Animation

Dưới đây là một hình ảnh động hover viền lấy cảm hứng từ UNIQLO. Khi một sự kiện di chuột, biên giới của hình ảnh sẽ trở nên sống động.

Tiles Animated Hover

Một thư viện thiết kế cho tiêu đề, một trong những tính năng này gồm zoom chậm, trượt, cửa sổ pop-ins, lớp phủ mờ số những thứ khác.

SVG clip-path Hover Effect

Một hiệu ứng di chuột hình ảnh x-ray spotlight siêu tuyệt vời cung cấp bởi SVGclip-path và CSS chuyển tiếp. Hoạt động tốt trên Chrome, Opera và Safari.

Trên đây là 10 thư viện CSS cung cấp cho bạn những hiệu ứng hình ảnh động độc đáo và ấn tượng, bạn có thể tham khảo và sử dụng cho trang web mình thu hút với người dùng nhé.

09:53

Phím tắt Chromebook

Phím tắt là tổ hợp các thao tác gõ phím và nhấp chuột mà bạn có thể sử dụng để thực hiện các tác vụ như chụp ảnh màn hình hoặc mở cửa sổ mới.

Xem bảng bên dưới để biết danh sách các phím tắt. Nếu bạn đang dùng bàn phím Windows hoặc Mac, hãy sử dụng phím Windows hoặc phím Command (Mac) thay cho phím Search, trừ khi có lưu ý khác.

Mẹo: Nhấn Ctrl + Alt + ? để xem bản đồ của các phím tắt này trên màn hình của bạn.

Tab và cửa sổ

Mở cửa sổ mới	Ctrl + N
Mở cửa sổ mới ở chế độ ẩn danh	Ctrl + Shift + N
Mở tab mới	Ctrl + T
Mở tệp trong trình duyệt	Ctrl + O
Đăng xuất khỏi Tài khoản Google của bạn trên Chrome OS	Ctrl + Shift + Q (hai lần)
Đóng tab hiện tại	Ctrl + W
Đóng cửa sổ hiện tại	Ctrl + Shift + W
Mở lại tab cuối mà bạn đã đóng. Chrome nhớ 10 tab cuối mà bạn đã đóng.	Ctrl + Shift + T
Chuyển đến tab ở vị trí đã chỉ định trong cửa sổ	Ctrl + 1 cho tới Ctrl + 8
Chuyển đến tab cuối cùng trong cửa sổ	Ctrl + 9
Tự kích hoạt các mục từ 1 đến 8	Alt + 1 cho tới Alt + 8
Sử dụng các phím F (F1 tới F12)	Search + 1 cho tới Search + =
Tự mở mục cuối	Alt + 9
Chuyển đến tab tiếp theo trong cửa sổ	Ctrl + Tab
Chuyển đến tab trước trong cửa sổ	Ctrl + Shift + Tab
Chuyển tới cửa sổ trước mà bạn đã mở	Alt + Tab
Chuyển đến cửa sổ đang mở tiếp theo	Alt + Shift + Tab
Chuyển tới trang trước trong lịch sử duyệt web của bạn	Alt + mũi tên trái
Đi tới trang tiếp theo trong lịch sử duyệt web của bạn	Alt + mũi tên phải
Mở liên kết trong tab mới trong nền	Nhấn Ctrl và nhấp vào một liên kết
Mở liên kết trong tab mới và chuyển sang tab mới	Nhấn Ctrl + Shift và nhấp vào một liên kết
Mở liên kết trong cửa sổ mới	Nhấn Shift và nhấp vào một liên kết
Mở liên kết trong tab	Kéo liên kết vào thanh địa chỉ của tab
Mở liên kết trong tab mới	Kéo liên kết vào khu vực trống trên dải tab
Mở trang web trong tab mới	Nhập địa chỉ web (URL) vào thanh địa chỉ, sau đó nhấn Alt + Enter
Đưa tab về vị trí ban đầu	Trong khi kéo tab, nhấn Esc
Gắn một cửa sổ ở bên trái	Alt + [
Gắn một cửa sổ ở bên phải	Alt + ]
Khóa màn hình của bạn	Search + L

Phím tắt cho trang

Trang trên	Alt hoặc Search và mũi tên lên
Trang dưới	Alt hoặc Search và mũi tên xuống
Cuộn xuống dưới trang web	Dấu cách
Chuyển tới đầu trang	Ctrl + Alt và mũi tên lên
Chuyển tới cuối trang	Ctrl + Alt và mũi tên xuống
In trang hiện tại của bạn	Ctrl + P
Lưu trang hiện tại của bạn	Ctrl + S
Tải lại trang hiện tại của bạn	Ctrl + R
Tải lại trang hiện tại mà không sử dụng nội dung đã lưu vào bộ nhớ cache	Ctrl + Shift + R
Phóng to trang	Ctrl và +
Thu nhỏ trang	Ctrl và -
Đặt lại mức thu phóng	Ctrl + 0
Dừng tải trang hiện tại của bạn	Esc
Nhấp chuột phải vào một liên kết	Nhấn Alt và nhấp vào một liên kết
Mở liên kết trong tab mới trong nền	Nhấn Ctrl và nhấp vào một liên kết
Lưu trang hiện tại của bạn làm dấu trang	Ctrl + D
Lưu tất cả các trang đang mở trong cửa sổ hiện tại của bạn làm dấu trang trong một thư mục mới	Ctrl + Shift + D
Lưu liên kết làm dấu trang	Kéo một liên kết vào thanh dấu trang
Mở thanh tìm kiếm để tìm kiếm trang hiện tại của bạn	Ctrl + F
Chuyển đến kết quả phù hợp tiếp theo để nhập vào thanh tìm kiếm	Ctrl + G hoặc Enter
Chuyển đến kết quả phù hợp trước để nhập vào thanh tìm kiếm	Ctrl + Shift + G hoặc Shift + Enter
Thực hiện tìm kiếm	Ctrl + K hoặc Ctrl + E, sau đó nhập cụm từ tìm kiếm sau gợi ý tìm kiếm vào thanh địa chỉ và nhấn Enter.
Thêm www. và .com vào mục nhập của bạn trên thanh địa chỉ rồi mở địa chỉ web kết quả	Ctrl + Enter
Chụp ảnh màn hình của trang hiện tại	Ctrl + Dành cho bàn phím không dùng Chrome OS: Ctrl + F5
Chụp một phần màn hình	Ctrl + Shift + , sau đó nhấp và kéo. Dành cho bàn phím không dùng Chrome OS: Ctrl + Shift + F5
Xem nguồn trang	Ctrl + U
Hiển thị hoặc ẩn bảng Công cụ dành cho nhà phát triển	Ctrl + Shift + I
Hiển thị hoặc ẩn Trình kiểm tra DOM	Ctrl + Shift + J

Cài đặt trình duyệt

Hiển thị hoặc ẩn thanh dấu trang. Nếu thanh bị ẩn, bạn có thể thấy dấu trang của mình trong menu Chrome.	Ctrl + Shift + B
Mở ứng dụng Tệp	Alt + Shift + M
Hiển thị các tệp bị ẩn trong ứng dụng Tệp	Ctrl + .
Mở trang Lịch sử	Ctrl + H
Mở trang Tải xuống	Ctrl + J
Mở Trình quản lý tác vụ	Search + Esc
Mở hoặc ẩn danh sách các phím tắt khả dụng	Ctrl + Alt + /
Nhận trợ giúp với Chromebook của bạn	Ctrl + ?
Định cấu hình hiển thị màn hình	Ctrl +
Mở khu vực trạng thái ở góc dưới cùng bên phải màn hình	Shift + Alt + S
Tự đánh dấu nút trình khởi chạy	Shift + Alt + L
Tự đánh dấu mục tiếp theo	Shift + Alt + L, sau đó Tab hoặc mũi tên phải
Tự đánh dấu mục trước	Shift + Alt + L, sau đó Shift + Tabhoặc mũi tên trái
Tự mở nút được đánh dấu	Shift + Alt + L, sau đó Space hoặcEnter
Tự xóa nút được đánh dấu	Shift + Alt + L, sau đó Esc
Chuyển tiêu điểm tới ngăn tiếp theo có thể truy cập bằng bàn phím. Các ngăn bao gồm: Khu vực trạng thái chứa thời gian, biểu tượng mạng và biểu tượng pin Trình khởi chạy Thanh địa chỉ Thanh dấu trang (nếu hiển thị) Nội dung web chính (gồm cả mọi thanh thông tin) Thanh tải xuống (nếu hiển thị)	Ctrl + hoặc Ctrl +
Đánh dấu thanh dấu trang (nếu hiển thị)	Alt + Shift + B
Đánh dấu hàng bằng thanh địa chỉ	Shift + Alt + T
Mở menu Chrome trên thanh công cụ của trình duyệt	Alt + E hoặc Alt + F
Mở menu nhấp chuột phải cho các mục được đánh dấu	Shift + Search + Tăng âm lượng
Bật hoặc tắt ChromeVox (phản hồi bằng giọng nói)	Ctrl + Alt + Z
Thay đổi độ phân giải màn hình	Ctrl + Shift và + hoặc -
Đặt độ phân giải màn hình về mặc định	Ctrl + Shift và 0
Xoay màn hình 90 độ	Ctrl + Shift và Tải lại

Chỉnh sửa văn bản

Bật hoặc tắt Caps Lock	Alt + Search
Chọn mọi nội dung trên trang	Ctrl + A
Chọn nội dung trong thanh địa chỉ	Ctrl + L hoặc Alt + D
Chọn từ hoặc chữ cái tiếp theo	Ctrl + Shift và mũi tên phải
Chọn văn bản ở cuối dòng	Shift + Search và mũi tên phải
Chọn văn bản ở đầu dòng	Shift + Search và mũi tên trái
Chọn từ hoặc chữ cái trước	Ctrl + Shift và mũi tên trái
Di chuyển đến cuối từ tiếp theo	Ctrl và mũi tên phải
Di chuyển tới đầu từ trước	Ctrl và mũi tên trái
Trang trên	Alt hoặc Search và mũi tên lên
Trang dưới	Alt hoặc Search và mũi tên xuống
Chuyển tới đầu trang	Ctrl + Alt và mũi tên lên
Chuyển tới cuối trang	Ctrl + Alt và mũi tên xuống
Chuyển tới cuối tài liệu	Ctrl + Search và mũi tên phải
Chuyển tới đầu tài liệu	Ctrl + Search và mũi tên trái
Sao chép nội dung đã chọn vào khay nhớ tạm	Ctrl + C
Dán nội dung từ khay nhớ tạm	Ctrl + V
Dán nội dung từ khay nhớ tạm dưới dạng văn bản thuần túy	Ctrl + Shift + V
Cắt	Ctrl + X
Xóa từ trước	Ctrl + Backspace
Xóa chữ cái tiếp theo (xóa tiến)	Alt + Backspace
Hoàn tác tác vụ cuối của bạn	Ctrl + Z
Làm lại tác vụ cuối của bạn	Ctrl + Shift + Z
Chuyển đổi giữa các ngôn ngữ bàn phím bạn đã đặt	Ctrl + Shift + Space
Chuyển sang ngôn ngữ bàn phím bạn đã sử dụng trước đó	Ctrl + Space
Làm mờ bàn phím (chỉ dành cho bàn phím có đèn nền)	Alt +
Làm cho bàn phím sáng hơn (chỉ dành cho bàn phím có đèn nền)	Alt +

11:29

Zoom ảnh

08:36

CSS3 image slider với định dạng thumbnails

Image Slider luôn luôn là một trong những chức năng cần có trong một website. Ngoài việc làm cho giao diện web đẹp và sinh động hơn, thì những hình ảnh sẽ là cách tuyệt vời nhất trong việc chuyển tải thông điệp của website đến cho khách viếng thăm.

css3-image-slider-voi-dinh-dang-thumbnails

Xem Demo | Download

Trong bài viết này, mình sẽ chia sẻ cho các bạn thêm một hiệu ứng image slider được làm bằng CSS3 với hiệu ứng fade-in-out.

HTML

Chúng ta sẽ tạo một slider với ảnh thumbnails được đặt nằm bên trên thẻ radio inputs để phát hiện sự kiện click.

CSS

Và đây là toàn bộ đoạn css giúp các bạn tạo một slide hình ảnh như sau :

.slider{
    width: 640px; /*Same as width of the large image*/
    position: relative;
    /*Instead of height we will use padding*/
    padding-top: 320px; /*That helps bring the labels down*/
 
    margin: 100px auto;
 
    /*Lets add a shadow*/
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
 
/*Last thing remaining is to add transitions*/
.slider>img{
    position: absolute;
    left: 0; top: 0;
    transition: all 0.5s;
}
 
.slider input[name='slide_switch'] {
    display: none;
}
 
.slider label {
    /*Lets add some spacing for the thumbnails*/
    margin: 18px 0 0 18px;
    border: 3px solid #999;
 
    float: left;
    cursor: pointer;
    transition: all 0.5s;
 
    /*Default style = low opacity*/
    opacity: 0.6;
}
 
.slider label img{
    display: block;
}
 
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
    border-color: #666;
    opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
    opacity: 0;
    transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
    opacity: 1;
    transform: scale(1);
}

01:56

Từng bước tạo nút bấm động với CSS3

Tạo ra các hiệu ứng động là một bước cải tiến rất lớn mà CSS3 mang lại cho chúng ta, nếu nắm vững, thì chúng ta hoàn toàn có thể làm những hiệu ứng đẹp cho các website hay blog của mình. Hôm nay mình sẽ chia sẻ với các bạn cách tạo hiệu ứng động cho các nút nhấn. Qua bài viết này, các bạn sẽ nắm vững hơn về CSS3 Animation và những hiệu ứng mà nó mang lại.

Xem Demo | Download

Trong bài viết này, chúng ta sẽ tạo ra một nút bấm với nhiều chi tiết bên trong, bao gồm icon và các đoạn chữ mô tả. Nào chúng ta cũng bắt đầu thôi :

HTML

Đoạn html bên dưới sẽ là nút nhấn của chúng ta cần tạo.


    $29
    
    Available on the Apple App Store
    

CSS

Chúng ta sẽ định dạng cho nút bấm (button) và chèn thuộc tính transition để tạo hiệu ứng.
.a-btn{
    background: linear-gradient(top, #a9db80 0%,#96c56f 100%);
    padding-left: 90px;
    padding-right: 105px;
    height: 90px;
    display: inline-block;
    position: relative;
    border: 1px solid #80ab5d;
    box-shadow:
        0px 1px 1px rgba(255,255,255,0.8) inset,
        1px 1px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position: absolute;
    left: 15px;
    top: 13px;
    border: none;
    transition: all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position: absolute;
    font-size: 36px;
    top: 18px;
    left: 18px;
    color: #6d954e;
    opacity: 0;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
    transition: opacity 0.2s ease-in-out;
}
.a-btn-text{
    padding-top: 13px;
    display: block;
    font-size: 30px;
    text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-text small{
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
}
.a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 80px;
    border-left: 1px solid #80ab5d;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    border: 1px solid rgba(0,0,0,0.5);
    background: #4e5c50 url(../images/arrow_down.png) no-repeat center center;
    box-shadow:
        0px 1px 1px rgba(255,255,255,0.3) inset,
        0px 1px 2px rgba(255,255,255,0.5);
    transition: all 0.3s ease-in-out;
}
Khi di chuyển chuột vào nút bấm, chúng ta sẽ thay đổi hiệu ứng bóng đổ , hiển thị giá đồng thời làm ảnh biến mất với hiệu ứng fade out.
.a-btn:hover{
    box-shadow:
        0px 1px 1px rgba(255,255,255,0.8) inset,
        1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
    transform: scale(10);
    opacity: 0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
}
Và khi nút nhấn được click vào, thì biểu tượng mũi tên bên phải sẽ to hơn so với hiện tại.
.a-btn:active {
    position:relative;
    top:1px;
    background:#80ab5d;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #a9db80;
}
.a-btn:active .a-btn-icon-right span{
    transform: scale(1.4);
}
Các bạn có thể làm tương tự như trên cho nhiều nút bấm với các hiệu ứng và biểu tượng khác nhau. Các bạn có thể lấy hình ảnh trực tiếp ở trang demo hoặc ở phần download.

01:47

Tạo hiệu ứng CSS3 dropdown menu cực pro

Tranh thủ mang đến cho các bạn một menu cực đẹp và ấn tượng được làm hoàn toàn bằng CSS3. Với hiệu ứng này, các bạn sẽ có thêm một lựa chọn cho website hay blog của mình.

Xem Demo | Down File

HTML

Đầu tiên luôn luôn là xây dựng một khung html chuẩn cho menu



Home
Menu 1                      
Submenu a
Submenu b
Submenu c
Submenu d
Submenu e
Submenu f
Submenu g
Submenu h


Menu 2                      
Submenu a
Submenu b
Submenu c
Submenu d
Submenu e
Submenu f
Submenu g
Submenu h


Menu 3                      
Submenu a
Submenu b
Submenu c
Submenu d
Submenu e
Submenu f
Submenu g
Submenu h


Menu 4

CSS
Và sau đây là toàn bộ đoạn css giúp các bạn định dạng cho menu :

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #000;
}
.container {
    margin: 30px auto;
    width: 90%;
}
 
/* general styles */
.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    height: 58px;
}
.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);
 
    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: 160px;
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
    border-radius: 5px 0 0;
}
.menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #808080;
    display: block;
    font-family: 'Lucida Console';
    font-size: 18px;
    line-height: 54px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}
 
/* onhover styles */
.menu li:hover {
    background-color: #1c1c1c;
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
    background: linear-gradient(#1c1c1c, #1b1b1b);
 
    border-bottom: 2px solid #222222;
    border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
    border-radius: 5px 0 0 0;
    border-left: 3px solid #C4302B;
    color: #C4302B;
}
 
/* submenu styles */
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;
 
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;
 
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
 
    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;
 
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
 
/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
 
.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}