Stampa
Categoria: System
Visite: 19364
Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

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

STYLES MENU

 

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 */

Back to Style Menu

SPEEDDIAL2 - STROKE STYLE

/* 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 */

Back to Style Menu

 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;
}
*/


Back to Style Menu

 SCREENSHOTS

  • SpeedDial2 Screenshot 01 Standard NO Custom CSS
    SpeedDial2 Screenshot 01 Standard NO Custom CSS
  • SpeedDial2 Screenshot 02 Options 1 of 2
    SpeedDial2 Screenshot 02 Options 1 of 2
  • SpeedDial2 Screenshot 03 Options 2 of 2
    SpeedDial2 Screenshot 03 Options 2 of 2
  • SpeedDial2 Screenshot 06 Stroke 01
    SpeedDial2 Screenshot 06 Stroke 01
  • SpeedDial2 Screenshot 06 Stroke 02 Hover
    SpeedDial2 Screenshot 06 Stroke 02 Hover
  • SpeedDial2 Screenshot 07 Stroke Scale 01
    SpeedDial2 Screenshot 07 Stroke Scale 01
  • SpeedDial2 Screenshot 07 Stroke Scale 02 Hover
    SpeedDial2 Screenshot 07 Stroke Scale 02 Hover

 

 - have fun - 

 

 

REFERENCES