Speed Dial it's a plug-in for Google Chrome for tab pages.
I just created a couple of custom CSS for it.
HOW TO INSTALL
Install is just a Copy and Paste:
- Open the Options page
- Click on "Customize dial style"
- Paste the CSS on "Custom CSS" field
- Shadow 3D
- Stroke
- Stroke and Scale on Hover (zoom) (my fav see the live sample)
- Screenshots
- SpeedDial2 Custom Live Sample
SPEEDDIAL2 - SHADOW 3D STYLE
/* byman - SpeedDial2 - CUSTOM CSS (google chrome tabbed page plugin) -> Style: SHADOW 3D -> Last Update: Sept. 10, 2013 History - fixed the dial shadow. It was too small for more than 5 dials. */ /* ************************************** GROUPS ************************************** */ /* li tag */ #groups li { height: 48px; padding-top: 12px; } /* Normal */ #groups li a { padding:8px 20px !important; /* padding Horizontal gt of selected to fix shifting of tabs */ opacity: 0.7; color: #FFFFFF !important; /* text-shadow: 1px 1px 0px #F2F2F2, 1px 2px 2px #666666; */ text-shadow: rgba(0, 0, 0, 0) -1px -1px 0px, rgba(0, 0, 0, 1) 1px 1px 0px, rgba(0, 0, 0, 1) 1px 1px 2px; -webkit-transition: all 0.01s ease-in-out !important; } /* Hover */ #groups li a:hover { opacity: 1; color: RED; text-shadow: 1px 1px 0px #F2F2F2, 1px 2px 2px #000000 !important; -webkit-transition: all 0.01s ease-in-out !important; -webkit-transform: scale(1.04) !important; } /* Selected */ #groups li a.selected { color: #F30000; text-transform: uppercase; text-shadow: 1px 1px 0px #F2F2F2, 1px 2px 2px #000000 !important; padding:8px 16px !important; height:26px; border-radius: 2px 8px; background-position: -0px 8px, top center; background-repeat: no-repeat; background-image: url(https://cdn1.iconfinder.com/data/icons/fs-icons-ubuntu-by-franksouza-/16/arrow-right.png), -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(rgba(3, 3, 3, 0.37))); webkit-transform: scale(1.6) !important; /* zoom:1.2; */ } /* ************************************** PAGES ************************************** */ a>div{ -webkit-transition: all 0.3s ease-in-out ; transition: all 0.3s ease-in-out ; -webkit-transform: scale(1) ; } a:hover>div{ background-size: 140% 140% !important; background-position:center !important; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out !important;; -webkit-transform: scale(1) !important; } /* Fix the shadow when dials are greater than 5. tested with 8 with a resolution 1920x1080 */ div.shadow { background-size: 88% 10px !important; background-position: 10px 0 !important; } /* END of byman - Custom CSS for SpeedDial2 - SHADOW */
/* byman - SpeedDial2 - CUSTOM CSS (google chrome tabbed page plugin) -> Style: STROKE -> Last Update: Sept. 10, 2013 - R4 History - fixed the dial shadow. It was too small for more than 5 dials. */ /* ************************************** GROUPS ************************************** */ /* li tag */ #groups li { height: 48px; padding-top: 12px; } /* Normal */ #groups li a { opacity: 0.7; color: #FFFFFF !important; letter-spacing: 1.2px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Simulating Text Stroke */ padding:8px 20px !important; /* to fix shifting of tabs, padding Horizontal have to be great than selected */ -webkit-transition: all 0.01s ease-in-out !important; } /* Hover */ #groups li a:hover { opacity: 0.9; color: white !important; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 2px #000!important; /* Simulating Text Stroke + Shadow */ -webkit-transition: all 0.01s ease-in-out !important; -webkit-transform: scale(1.04) !important; /* zoom */ } /* Selected */ #groups li a.selected { opacity: 0.9; color: #FFFFFF; text-transform: uppercase; padding:8px 16px !important; /* to fix shifting of tabs, padding Horizontal have to be lower than normal */ height:26px; webkit-transform: scale(1.6) !important; /* zoom */ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 2px #000!important; /* Simulating Text Stroke + Shadow */ /* button effect */ display: inline-block; border: 1px solid rgba(255,255,255,1); border-bottom: 3px solid rgba(255,255,255,0.6); -webkit-border-radius: 4px; background: rgba(0,0,0,0.25); -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); } /* ************************************** PAGES ************************************** */ a>div{ -webkit-transition: all 0.3s ease-in-out ; transition: all 0.3s ease-in-out ; -webkit-transform: scale(1) ; } a:hover>div{ background-size: 140% 140% !important; background-position:center !important; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out !important;; -webkit-transform: scale(1) !important; } /* Fix the shadow when dials are greater than 5. tested with 8 with a resolution 1920x1080 */ div.shadow { background-size: 88% 10px !important; background-position: 10px 0 !important; } /* END of byman - Custom CSS for SpeedDial2 - STROKE */
SPEEDDIAL2 - STROKE AND SCALE (zoom)
/* byman - SpeedDial2 - CUSTOM CSS (google chrome tabbed page plugin) -> Style: -> Group STROKE -> Thumbs SCALE -> Last Update: Oct. 5, 2013 - R4 */ /* ************************************** GROUPS - LABELS ************************************** */ /* li tag */ #groups li { height: 48px; padding-top: 12px; } /* Normal */ #groups li a { opacity: 0.7; color: #FFFFFF !important; letter-spacing: 1.2px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Simulating Text Stroke */ padding:8px 20px !important; /* to fix shifting of tabs, padding Horizontal have to be great than selected */ -webkit-transition: all 0.01s ease-in-out !important; } /* Hover */ #groups li a:hover { opacity: 0.9; color: white !important; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 2px #000!important; /* Simulating Text Stroke + Shadow */ -webkit-transition: all 0.01s ease-in-out !important; -webkit-transform: scale(1.04) !important; /* zoom */ } /* Selected */ #groups li a.selected { opacity: 0.9; color: #FFFFFF; text-transform: uppercase; padding:8px 16px !important; /* to fix shifting of tabs, padding Horizontal have to be lower than normal */ height:26px; webkit-transform: scale(1.6) !important; /* zoom */ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 2px #000!important; /* Simulating Text Stroke + Shadow */ /* button effect */ display: inline-block; border: 1px solid rgba(255,255,255,1); border-bottom: 3px solid rgba(255,255,255,0.6); -webkit-border-radius: 4px; background: rgba(0,0,0,0.25); -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); } /* ************************************** PAGES - THUMBS ************************************** */ #pages li.link { -webkit-transition: all 0.5s ease !important; z-index:2 !important; } #pages li.link:hover { -webkit-transition: all 0.7s ease !important; z-index:20 !important; -webkit-transform: scale(1.18,1.18) !important; /* alternative hover to scale : gray or rotate -webkit-filter: grayscale(100%) !important; -webkit-transform: rotate(-10deg); */ } #pages li .thumbnail_container { -webkit-box-shadow: inset 0px 0px 40px 20px rgba(0,0,0,0.30); -webkit-transition: all 0.5s ease !important; } #pages li .thumbnail_container:hover { -webkit-transition: all 0.7s ease !important; -webkit-box-shadow:inset 0px 0px 30px 5px rgba(0,0,0,0.30); } /* => Fix the shadow when dials are greater than 5. tested with 8 with a resolution 1920x1080 */ div.shadow { background-size: 88% 10px !important; background-position: 10px 0 !important; } */
- have fun -