Dettagli

Categoria: css

Pubblicato: 07 Novembre 2013

Ultima modifica: 06 Agosto 2017

Visite: 11361

• snippets
• css

This contains some great css snippets found on internet or  just created/changed by myself. 

Box with glass border

.box {
    background: #f0edcc;
    background-clip: padding-box;          /* Background stops at border */
    border: 4px solid rgba(255,255,255,.2);
    border-radius: 3px;
    box-shadow:
       0    0   1px  rgba(255,255,255,.8), /* Bright outer highlight */
       0    0   3px  rgba(0,0,0,.8),       /* Outer shadow */
       1px  1px 0    rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */
      -1px -1px 0    rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */
    padding: 10px;
}

thanks to Jordan Gray for his post on stackoverflow

Break word for word wrap

.acapo{
word-break:break-all
}

Apply to classes starting with ...

...ie: to select all classes starting with leading like "leading-[n]". The [n] is 1, 2, 3 ...n

[class*="leading"] {
  margin: 0 0 20px 0;
}

Apply to First and Last element

.nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

Text Gradient 

.mytextgradient {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  color: #234EFA;
  background: -webkit-linear-gradient(#234EFA 50%, #040A22);
}

PNG-Shadow 

Shadow for transparent image

my-Transparent-img {
   -webkit-filter: drop-shadow(5px 5px 5px #222); 
   filter: drop-shadow(5px 5px 5px #222); 
}

 Thanks to Stackoverflow for the discussion

Image auto resize 

/* image auto size when resize the browser */
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto\9; /* ie8 */

Select Next Element

p:nth-child(2) {
    background: #ff0000;
}
p:nth-child(4) {
    background: #00000;
}

p:nth-child(odd) {
    background: #ff0000;
}

p:nth-child(even) {
    background: #0000ff;
}

p:nth-child(3n+0) {
    background: #ff0000;
}

•  w3school for more details

CSS Reflection

/* chrome and safari */
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

 HongKiat Blog

 CSS hover can display hidden element

/* will show the element with class tooltiptext */
.tooltip:hover .tooltiptext {
	display: block;
	opacity: 1;
}

To Be Continued... 

Stay tuned, I will add more snippets soon...

Dettagli

Categoria: SQL

Pubblicato: 03 Novembre 2013

Ultima modifica: 24 Novembre 2013

Visite: 29082

Image to have a table like the following and you need to get the max value of COL2 for each COL1.

Leggi tutto...

Dettagli

Categoria: Javascript

Pubblicato: 26 Novembre 2013

Ultima modifica: 05 Gennaio 2015

Visite: 16576

• snippets
• jquery

This page contains some jquery code snippets. I wrote them day by day during developping, so they are not well organized but for sure they are useful.

Leggi tutto...

Dettagli

Categoria: System

Pubblicato: 03 Settembre 2013

Ultima modifica: 06 Ottobre 2013

Visite: 24393

Valutazione attuale: 4 / 5

Speed Dial it's a plug-in for Google Chrome for tab pages.

I just created a couple of custom CSS for it.

Leggi tutto...

Dettagli

Categoria: System

Pubblicato: 22 Agosto 2013

Ultima modifica: 18 Ottobre 2022

Visite: 13431

Da quando sono usciti i sistemi windows a 64 per i client le immagini di anteprima, meglio conosciute con il nome inglese thumbnail, hanno sempre rappresentato un problema per molti software. Al posto dell'immagine che rappresenta il contenuto in bella vista c'è l'icona del programma a cui è associato il file.

Leggi tutto...

Dettagli

Categoria: SQL

Pubblicato: 06 Luglio 2013

Ultima modifica: 21 Agosto 2013

Visite: 51931

Di recente ho avuto la necessità di "sbirciare" in un database di cui non avevo la documentazione. Volevo trovare la tabella dove era memorizzata una data parola.

Leggi tutto...

Dettagli

Categoria: Joomla

Pubblicato: 02 Marzo 2013

Ultima modifica: 02 Marzo 2013

Visite: 18213

I am really entusiast to suggest you a good Syntax Highlighter for Joomla.

Leggi tutto...