Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Rounded Border Content Clipping
#1
Un simple ejemplo de desbordamiento: oculto con un border-radius.
html:
Código:
<h2 class="caption">Rounded Border Content Clipping</h2>


    <div id="middle">
        <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt imperdiet ex, ut imperdiet nisi convallis ut. Nam eget rhoncus turpis. Etiam iaculis lacinia sapien, id euismod odio efficitur id. Maecenas consequat leo felis, vel dictum augue efficitur rutrum. Fusce porttitor nibh sit amet mattis malesuada. Nunc mollis rutrum nulla in lobortis. Nunc eget purus ex.

Fusce id tortor dignissim metus malesuada ultricies. Morbi sed nunc laoreet lacus elementum lobortis. Sed fermentum consequat neque nec commodo. In lorem tortor, ultricies ac rhoncus quis, semper eu nunc. Suspendisse ut quam at massa dapibus dapibus. Donec condimentum neque non hendrerit hendrerit. Phasellus eu sem ipsum. Morbi et aliquet tortor.

Etiam in lectus congue ante maximus porta. Proin augue turpis, mollis eu blandit et, vestibulum et lacus. Etiam nisi diam, ultrices non nisl ac, commodo egestas nunc. Donec viverra dui et augue pellentesque vestibulum. Nunc eget nibh ut eros interdum maximus vel in arcu. Suspendisse pretium sagittis malesuada. Praesent ultrices felis placerat libero varius tempor a eu metus. Sed aliquet blandit odio, nec luctus nisi.

Suspendisse dapibus, leo vel tempus tristique, lorem dui tincidunt arcu, vel eleifend metus ex ornare orci. Ut id eros ut eros ultricies laoreet. Sed aliquet varius eros, sed suscipit leo laoreet vitae. Aliquam aliquam aliquet nulla eget pulvinar. Nam blandit vitae ante nec molestie. Pellentesque eleifend, magna pulvinar rutrum tincidunt, arcu justo sodales felis, id aliquam ex odio ut leo. Maecenas scelerisque aliquam interdum.

Phasellus vel dolor venenatis, interdum sem ac, malesuada leo. Etiam accumsan consequat nunc, vel luctus tellus posuere at. Integer porta vestibulum ultrices. Sed feugiat viverra velit. Donec id mi felis. Proin sollicitudin nisl id nibh rhoncus ornare. Pellentesque nisl odio, lobortis ut risus at, efficitur facilisis velit. Proin vulputate mauris ipsum, ac sagittis purus euismod nec. Cras viverra consectetur elit, ac aliquam nisl auctor sagittis. Donec scelerisque quam nibh, ac ullamcorper turpis pulvinar vitae. Ut efficitur mauris id odio tincidunt, ac tempor ante viverra. Phasellus sit amet ullamcorper mi, eu laoreet lorem. Proin vel nunc justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vitae ultrices lorem.</div>
    </div>
</div>

CSS:

Código:
.caption {
  text-align: center;
  padding-top: 7%;
}

#middle {
  position: absolute;
  top: 25%;
  left: 25%;
  right: 25%;
  bottom: 25%;
  border-radius: 50%;
  overflow: hidden;
}

#box {
  width: 100%; height: 100%;
  background-color: #cde;
}

demo, etc.: http://cssdeck.com/labs/rounded-border-content-clipping
WWW




Usuarios navegando en este tema: 1 invitado(s)