Latest revision as of 15:22, 30 September 2017

Posizionamento

Significati del posizionamento: statico, Relativo, fisso e Assoluto: quora.com
Change the positioning
Instead of the default state of position: static, you would use a positioning value that allowed you to change the offset position of the element. These can affect content flow.

• position: relative (position the element relative to where it would be in the normal flow)
• position: fixed (position the element relative to the window)
• position: absolute (position the element relative to a parent element that's been positioned)

After using one of those three positioning options, you could then use the top and left properties to put the element where you want.

Regioni a scomparsa

Esempi per implementare il classico "Read more". Per ricerche: "text fade out effect when it overflows", "Text Fade Out / Read More Link", Dynamically shortened Text with “Show More”

• Da css-tricks.com, demo
• Da vikramrao

Decorazione elementi HTML

body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: verdana;
    font-size: 20px;
}

Classi

   <div class="editor-row curFocus">
       <div class="editor-label">
           <label for="FirstName">First Name</label>
       </div>
       <div class="editor-field">
          <input class="text-box single-line valid" id="FirstName" 
                name="FirstName" type="text" value="Nancy" maxlength="20">
       </div>
   </div>
</div>

Le classi sono referenziate col .

.editor-row {
  width: 100%; display: table-row;
}
.editor-label {
  padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
   padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
   display: table-cell;
 }

Mappa e Link

CSS

HTML | JavaScript | JQuery

Parole chiave: