Inicia sesión



En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en transición y animaciones. Uso interesante en CSS3 de Formas generadas - Shapes generated.
Formas implementadas con gradientes CSS
background:
  linear-gradient(currentColor, currentColor)
  50% / 50% 50%
  no-repeat;
 
background:
  linear-gradient(
    110deg,
    transparent 30%, currentColor 30%,
    currentColor 70%, transparent 70%
  )
  50% / 90% 40%
  no-repeat;
 
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 75%
  no-repeat;
 
background:
  radial-gradient(
    circle at 50% 0%,
    currentColor 40%, transparent 40%
  )
  50% 100% / 60% 60%
  no-repeat;
 
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 45%
  no-repeat;
 
background:
  radial-gradient(
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
 
background:
  linear-gradient(90deg, currentColor, currentColor)
  50% / 2px 75%
  no-repeat;
 
background:
  linear-gradient(
    -60deg,
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
 
background:
  linear-gradient(
    -135deg, currentColor 50%, transparent 50%
  )
  50% / 50% 50%
  no-repeat;
 
background:
  conic-gradient(
    from 145deg,
    currentColor 0, currentColor 20%, transparent 20%
  )
  50% -50% / 80% 80%
  no-repeat;
 
background:
  conic-gradient(
    from 165deg at 50% -86%,
    currentColor 0, currentColor 8%, transparent 8%
  )
  50% / 50% 50%
  no-repeat;
 
background:
  conic-gradient(
    from -45deg,
    currentColor 25%, currentColor 50%,
    transparent 50%, transparent 75%,
    currentColor 75%
  )
  50% 120% / 30% 80%
  no-repeat;
 
background:
  conic-gradient(
    from 90deg at 0 0,
    transparent 25deg, currentColor 25deg,
    currentColor 65deg, transparent 65deg
  )
  50% / 50% 50%
  no-repeat;
 
background:
  conic-gradient(
    from 90deg,
    transparent 12.5%, currentColor 12.5%,
    currentColor 37.5%, transparent 37.5%,
    transparent 62.5%, currentColor 62.5%,
    currentColor 87.5%, transparent 87.5%
  )
  50% / 32% 50%
  no-repeat;
 
background:
  conic-gradient(
    transparent 60deg, currentColor 60deg,
    currentColor 120deg, transparent 120deg,
    transparent 240deg, currentColor 240deg,
    currentColor 300deg, transparent 300deg
  )
  50% / 50% 50%
  no-repeat;
 
background:
  repeating-linear-gradient(
    transparent -1%, transparent 14%,
    currentColor 14%, currentColor 28%
  )
  50% / 50% 60%
  no-repeat;

Este es el CSS, HTML en un ejemplo practico

<style>
.section_item {
  padding: 10vw;
  z-index: 1;
  position: relative;
  text-align: center;
}

/* Background*/

.background1 {
background:
  linear-gradient(currentColor, currentColor)
  50% / 50% 50%
  no-repeat;
}

.background2 {
background:
  linear-gradient(
    110deg,
    transparent 30%, currentColor 30%,
    currentColor 70%, transparent 70%
  )
  50% / 90% 40%
  no-repeat;
}

.background3 {
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 75%
  no-repeat;
}

.background4 { 
background:
  radial-gradient(
    circle at 50% 0%,
    currentColor 40%, transparent 40%
  )
  50% 100% / 60% 60%
  no-repeat;
}

.background5 { 
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 45%
  no-repeat;
}

.background6 { 
background:
  radial-gradient(
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
}

.background7 { 
background:
  linear-gradient(90deg, currentColor, currentColor)
  50% / 2px 75%
  no-repeat;
}

.background8 {
background:
  linear-gradient(
    -60deg,
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
}

.background9 {
background:
  linear-gradient(
    -135deg, currentColor 50%, transparent 50%
  )
  50% / 50% 50%
  no-repeat;
}

.background10 {
background:
  conic-gradient(
    from 145deg,
    currentColor 0, currentColor 20%, transparent 20%
  )
  50% -50% / 80% 80%
  no-repeat;
}

.background11 {
background:
  conic-gradient(
    from 165deg at 50% -86%,
    currentColor 0, currentColor 8%, transparent 8%
  )
  50% / 50% 50%
  no-repeat;
}

.background12 {
background:
  conic-gradient(
    from -45deg,
    currentColor 25%, currentColor 50%,
    transparent 50%, transparent 75%,
    currentColor 75%
  )
  50% 120% / 30% 80%
  no-repeat;
}

.background13 {
background:
  conic-gradient(
    from 90deg at 0 0,
    transparent 25deg, currentColor 25deg,
    currentColor 65deg, transparent 65deg
  )
  50% / 50% 50%
  no-repeat;
}

.background14 {
background:
  conic-gradient(
    from 90deg,
    transparent 12.5%, currentColor 12.5%,
    currentColor 37.5%, transparent 37.5%,
    transparent 62.5%, currentColor 62.5%,
    currentColor 87.5%, transparent 87.5%
  )
  50% / 32% 50%
  no-repeat;
}

.background15 {
background:
  conic-gradient(
    transparent 60deg, currentColor 60deg,
    currentColor 120deg, transparent 120deg,
    transparent 240deg, currentColor 240deg,
    currentColor 300deg, transparent 300deg
  )
  50% / 50% 50%
  no-repeat;
}

.background16 {
background:
  repeating-linear-gradient(
    transparent -1%, transparent 14%,
    currentColor 14%, currentColor 28%
  )
  50% / 50% 60%
  no-repeat;
}
</style>
<section class="section_item background1">
</section>
<section class="section_item background2">
</section>
<section class="section_item background3">
</section>
<section class="section_item background4">
</section>
<section class="section_item background5">
</section>
<section class="section_item background6">
</section>
<section class="section_item background7">
</section>
<section class="section_item background8">
</section>
<section class="section_item background9">
</section>
<section class="section_item background10">
</section>
<section class="section_item background11">
</section>
<section class="section_item background12">
</section>
<section class="section_item background13">
</section>
<section class="section_item background14">
</section>
<section class="section_item background15">
</section>
<section class="section_item background16">
</section>
Ver resultados

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-14
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial

Gradientes en CSS3 Gradientes en CSS3...
Tutoriales en linea
¿Te gusta el tutorial?




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!