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 -

