118
votos
Aceptado
¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?
La propiedad position sirve para posicionar un elemento dentro de la página. Sin embargo, dependiendo de cual sea la propiedad que usemos, el elemento tomará una referencia u otra para posicionarse ...
64
votos
Aceptado
Guías de estilo oficiales para HTML, CSS y Javascript
El propósito de las guías es ayudar a lidiar con la Ley de la trivialidad, también conocida en el desarrollo de software como el efecto de la caseta de bicis.
Algunas de estas son requeridas si ...
35
votos
Aceptado
¿Qué significa la arroba (@) en CSS?
Reglas de @
(Reglas-At o at-rules)
Son declaraciones CSS que encapsulan un grupo de reglas, pero no están directamente relacionadas a elementos HTML/XML. Controlan la forma en que se aplican los ...
29
votos
Aceptado
CSS: ¿Qué son los media queries, para qué sirven, cómo se agrupan y cómo implementarlos?
Definición
Un media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo ...
27
votos
Aceptado
¿En qué casos se puede utilizar calc() en CSS?
Conozco varios casos donde no es canónico su uso, pero es mucho más sencillo hacerlo con calc que de cualquier otra manera.
Posicionamiento de imágenes de fondo
Es bastante sencillo posicionar una ...
20
votos
Aceptado
Asignar tamaño fijo a las columnas de una tabla HTML
Añadiendo un ancho fijo a su tabla y además la propiedad table-layout , y luego asignar un ancho a los td , y th y overflow-wrap para controlar el contenido de estos.
table{
table-layout: ...
20
votos
Aceptado
Generar un grid con un div que ocupe más de una fila en Bootstrap 4
Antes que nada, quiero aclarar que no conozco Angular, y asumo por lo que dice el OP que la estructura del HTML generado no se puede modificar por algún motivo.
El problema en este caso y por el cual ...
19
votos
Cambiar propiedades del elemento anterior solamente con CSS
Probando, por puro interés académico y cabezonería, me negaba a creer que no hubiese una manera de hacer lo que necesitas. Y a grandes rasgos no existe una manera de seleccionar un elemento anterior ...
18
votos
Aceptado
¿Cómo eliminar los botones de un input number?
En los navegadores basados en Webkit podrias utilizar: -webkit-inner-spin-button y -webkit-outer-spin-button para ocultarlos, aunque igual se podrá seguir aumentando el numero a través del scroll del ...
17
votos
Selector para todos los elementos menos el primero
Puedes utilizar selector :not(selector) y filtrar con el selector :first-of-type.
p.title:not(:first-of-type) {
color: red;
}
<p class="title">Buenos días</p>
<p class="title"...
16
votos
Aceptado
¿Cómo hacer un cilindro con css?
Lo primero que debes tener presente cuando manejas transformaciones tridimensionales en CSS es que los elementos html no tienen grosor por lo que es imposible hacer un círculo, cuadrado u otra figura ...
16
votos
Aceptado
En un html olvidé poner el DOCTYPE así que se agregaban más estilos de user agent a una tabla... ¿Por qué?
Al no definir el doctype estás "activando" el modo Quirks del navegador, aquí una pequeña explicación de su significado en wikipedia:
... en modo estándar las página son dibujadas de ...
16
votos
Aceptado
¿Qué es y para que se utiliza la especificidad de CSS?
La especificidad hace referencia a la relevancia que tiene un estilo concreto de CSS sobre un elemento de la página al cual le están afectando varios estilos de CSS al mismo tiempo. Es decir, hace ...
15
votos
Aceptado
chrome no reconoce justify-self: center
Cuando un elemento tiene una posición absoluta, este deja de tener el comportamiento de su contenedor y pasa a tener un comportamiento escalado a los contenedores superiores hasta el global, es decir, ...
14
votos
Aceptado
Carousel - ¿Cómo evitar la selección de imagen y crear un moviento automático de izquierda y derecha y aplicar un scroll horizontal?
Vamos a hacerlo por partes.
Primero el carrusel de testimonios. Lo que quieres es que se anime automáticamente sin necesidad de que el usuario pulse en los botones. Esto lo puedes realizar de una ...
14
votos
Aceptado
¿Cómo aplicar una capa oscura transparente a una imagen de fondo?
Una posibilidad sería usar los filtros CSS para cambiar el contraste/luminosidad de la imagen. Si pones una luminosidad entre 0 y 1 la imagen se verá más oscura. Algo como este ejemplo:
#image {
...
14
votos
Aceptado
Efecto "Pulso" en CSS3
Lo puedes conseguir creando pseudo-elemtos :before y :after y aplicándoles la misma animación con un retraso para dar ese efecto. La idea sería que tuvieran un borde que cambie de color y tamaño.
...
13
votos
¿Como colocar las leyendas en una sola columna de una gráfica de torta y hacer responsive?
En tu demo encontré los siguientes errores:
Referencia a propiedad no definida: En la línea 2021 se establece que var ci = e.view.grafica_pie;, lo que provoca que ci sea undefined.
La solución es ...
12
votos
Aceptado
Como rotar 180 grados horizontalmente un div
Efecto: Vuelta carta
Propiedad perspective:
Determina la distancia entre el plano z=0
y el usuario para dar algo de perspectiva al elemento 3D posicionado.
Propiedad transform-style con el ...
12
votos
Aceptado
¿Cómo detectar si el dispositivo es iPhone con CSS?
Estos media queries sólo aplican a iPhone.
portrait : significa en modo retrato (vertical)
landscape: significa en modo paisaje (horizontal)
iPhone 4 y 4s
/* ----------- iPhone 4 and 4S ----------- *...
12
votos
Aceptado
¿Colocar texto de celda de tabla html en forma vertical?
Existe la propiedad CSS writing-mode: vertical-lr; la cual provee dicha funcionalidad. Acompañado de un rotate puede llegar a darle el diseño que tú esperas.
NOTA:
Observa que he agregado un tag p y ...
12
votos
Aceptado
¿Se puede crear un div flexible en altura?
Hay un truquito que te permite hacerlo muy fácilmente: cuando el padding lo defines con valores porcentuales, el valor de referencia es el ancho del contenedor. De la web de la W3C, en la página de ...
Wiki de comunidad
12
votos
Aceptado
Mi HTML no reconoce el CSS
Si tienes un archivo .css no tienes que indicar las etiquetas <style>. Son etiquetas html.
#a {
width: 100px;
height: 100px;
color: red;
}
<html lang="es">
&...
11
votos
Guías de estilo oficiales para HTML, CSS y Javascript
te diría que uses las guías de esta página (aunque están en inglés) http://www.w3schools.com para HTML y CSS, suelo utilizarlas cuando tengo alguna duda o no me acuerdo de alguna propiedad y van ...
11
votos
Aceptado
¿Cómo puedo crear un checkbox con 3 estados (true, null, false) con bootstrap?
Un checkbox con 3 estados:
var $check = $("input[type=checkbox]");
var el;
$check.data('checked', 0).on('click', function() {
el = $(this);
switch (el.data('checked')) {
...
11
votos
Aceptado
¿Cómo solucionar errores en los enlaces?
Despues de ver tu pregunta y explorar las distintas respuestas y lo que querias, llegue a la conclusion de que esto querias :
.views {
width: 100%;
background-color: white;
border: 1px ...
11
votos
¿Cómo mostrar una imagen cuando me apoyo en un div?
Una manera de hacerlo utilizando solamente css:
Colocar la imagen dentro de un div contendor con ancho fijo (en este caso #hoverarea con 100 x 100)
Darle a la imágen un ancho maximo y minimo del 100% ...
11
votos
Aceptado
¿Como poner border shadow a una imagen cuando le clickas?
Puedes cambiar el tipo de input para que, en vez de tipo radio, sea de tipo checkbox.
De esta manera, puedes asociar una label a dicho checkbox tal y como lo estabas haciendo mediante el atributo for ...
11
votos
Aceptado
Centrar texto de un label HTML
Lo solucionas con Flexbox, aplicando a cada label para que sea un contenedor inline-flex y centrando su contenido con las propiedades justify-content y align-items en center.
$(document).ready(...
Only top scored, non community-wiki answers of a minimum length are eligible
Etiquetas relacionadas
css3 × 1785html5 × 997
css × 823
html × 640
javascript × 444
jquery × 188
bootstrap × 184
php × 67
bootstrap-4 × 57
responsive × 38
flexbox × 35
web × 32
scss × 32
animación × 25
mediaqueries × 20
sass × 19
css-transform × 19
wordpress × 16
div × 16
materialize × 15
svg × 15
bootstrap-3 × 15
css-grid-layout × 15
angular × 14
imagen × 14