Archief voor categorie: CSS

Margin en padding

Er schijnen nogal wat onduidelijkheden te bestaan over het onderscheid tussen marging en padding in CSS. Toch is het helemaal niet zo complex. Het verschill tussen beide kan op eenvoudige wijze duidelijk gemaakt worden aan de hand van twee afbeeldingen. Stel je voor je hebt een webpagina waarbinnen zich een vierkant bevindt met daarin tekst. Lees meer

7 Gratis CSS3 menu’s

in CSS, Freebies/door Martin

Freebie Details

Bestandsgrootte: 12.7 KB
Licentie: Vrij voor persoonlijk en commercieel gebruik. Redistributie is verboden.

Vandaag geven wij 7 CSS3 menu’s weg welke compatible zijn met IE8+, Firefox 4+, Safari 5+, Opera en Chrome. De menu’s zijn allemaal hetzelfde alleen de kleuren verschillen. De kleuren zijn blauw/grijs, blauw, grijs, groen, oranje, rood en zwart. Lees meer

img:is([sizes=auto i],[sizes^="auto,"i]){contain-intrinsic-size:3000px 1500px}:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--metallic-red: #b02b2c;--wp--preset--color--maximum-yellow-red: #edae44;--wp--preset--color--yellow-sun: #eeee22;--wp--preset--color--palm-leaf: #83a846;--wp--preset--color--aero: #7bb0e7;--wp--preset--color--old-lavender: #745f7e;--wp--preset--color--steel-teal: #5f8789;--wp--preset--color--raspberry-pink: #d65799;--wp--preset--color--medium-turquoise: #4ecac2;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 1rem;--wp--preset--font-size--medium: 1.125rem;--wp--preset--font-size--large: 1.75rem;--wp--preset--font-size--x-large: clamp(1.75rem, 3vw, 2.25rem);--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0)}:root{--wp--style--global--content-size: 800px;--wp--style--global--wide-size: 1130px}:where(body){margin:0}.wp-site-blocks>.alignleft{float:left;margin-right:2em}.wp-site-blocks>.alignright{float:right;margin-left:2em}.wp-site-blocks>.aligncenter{justify-content:center;margin-left:auto;margin-right:auto}:where(.is-layout-flex){gap:0.5em}:where(.is-layout-grid){gap:0.5em}.is-layout-flow>.alignleft{float:left;margin-inline-start:0;margin-inline-end:2em}.is-layout-flow>.alignright{float:right;margin-inline-start:2em;margin-inline-end:0}.is-layout-flow>.aligncenter{margin-left:auto!important;margin-right:auto!important}.is-layout-constrained>.alignleft{float:left;margin-inline-start:0;margin-inline-end:2em}.is-layout-constrained>.alignright{float:right;margin-inline-start:2em;margin-inline-end:0}.is-layout-constrained>.aligncenter{margin-left:auto!important;margin-right:auto!important}.is-layout-constrained>:where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:var(--wp--style--global--content-size);margin-left:auto!important;margin-right:auto!important}.is-layout-constrained>.alignwide{max-width:var(--wp--style--global--wide-size)}body .is-layout-flex{display:flex}.is-layout-flex{flex-wrap:wrap;align-items:center}.is-layout-flex>:is(*,div){margin:0}body .is-layout-grid{display:grid}.is-layout-grid>:is(*,div){margin:0}body{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}a:where(:not(.wp-element-button)){text-decoration:underline}:root :where(.wp-element-button,.wp-block-button__link){background-color:#32373c;border-width:0;color:#fff;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;padding-top:calc(0.667em + 2px);padding-right:calc(1.333em + 2px);padding-bottom:calc(0.667em + 2px);padding-left:calc(1.333em + 2px);text-decoration:none;text-transform:inherit}.has-black-color{color:var(--wp--preset--color--black)!important}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray)!important}.has-white-color{color:var(--wp--preset--color--white)!important}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink)!important}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red)!important}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange)!important}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber)!important}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan)!important}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan)!important}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue)!important}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue)!important}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple)!important}.has-metallic-red-color{color:var(--wp--preset--color--metallic-red)!important}.has-maximum-yellow-red-color{color:var(--wp--preset--color--maximum-yellow-red)!important}.has-yellow-sun-color{color:var(--wp--preset--color--yellow-sun)!important}.has-palm-leaf-color{color:var(--wp--preset--color--palm-leaf)!important}.has-aero-color{color:var(--wp--preset--color--aero)!important}.has-old-lavender-color{color:var(--wp--preset--color--old-lavender)!important}.has-steel-teal-color{color:var(--wp--preset--color--steel-teal)!important}.has-raspberry-pink-color{color:var(--wp--preset--color--raspberry-pink)!important}.has-medium-turquoise-color{color:var(--wp--preset--color--medium-turquoise)!important}.has-black-background-color{background-color:var(--wp--preset--color--black)!important}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray)!important}.has-white-background-color{background-color:var(--wp--preset--color--white)!important}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink)!important}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red)!important}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange)!important}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber)!important}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan)!important}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan)!important}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue)!important}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue)!important}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple)!important}.has-metallic-red-background-color{background-color:var(--wp--preset--color--metallic-red)!important}.has-maximum-yellow-red-background-color{background-color:var(--wp--preset--color--maximum-yellow-red)!important}.has-yellow-sun-background-color{background-color:var(--wp--preset--color--yellow-sun)!important}.has-palm-leaf-background-color{background-color:var(--wp--preset--color--palm-leaf)!important}.has-aero-background-color{background-color:var(--wp--preset--color--aero)!important}.has-old-lavender-background-color{background-color:var(--wp--preset--color--old-lavender)!important}.has-steel-teal-background-color{background-color:var(--wp--preset--color--steel-teal)!important}.has-raspberry-pink-background-color{background-color:var(--wp--preset--color--raspberry-pink)!important}.has-medium-turquoise-background-color{background-color:var(--wp--preset--color--medium-turquoise)!important}.has-black-border-color{border-color:var(--wp--preset--color--black)!important}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray)!important}.has-white-border-color{border-color:var(--wp--preset--color--white)!important}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink)!important}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red)!important}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange)!important}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber)!important}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan)!important}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan)!important}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue)!important}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue)!important}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple)!important}.has-metallic-red-border-color{border-color:var(--wp--preset--color--metallic-red)!important}.has-maximum-yellow-red-border-color{border-color:var(--wp--preset--color--maximum-yellow-red)!important}.has-yellow-sun-border-color{border-color:var(--wp--preset--color--yellow-sun)!important}.has-palm-leaf-border-color{border-color:var(--wp--preset--color--palm-leaf)!important}.has-aero-border-color{border-color:var(--wp--preset--color--aero)!important}.has-old-lavender-border-color{border-color:var(--wp--preset--color--old-lavender)!important}.has-steel-teal-border-color{border-color:var(--wp--preset--color--steel-teal)!important}.has-raspberry-pink-border-color{border-color:var(--wp--preset--color--raspberry-pink)!important}.has-medium-turquoise-border-color{border-color:var(--wp--preset--color--medium-turquoise)!important}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple)!important}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan)!important}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange)!important}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red)!important}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray)!important}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum)!important}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple)!important}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux)!important}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk)!important}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean)!important}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass)!important}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight)!important}.has-small-font-size{font-size:var(--wp--preset--font-size--small)!important}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium)!important}.has-large-font-size{font-size:var(--wp--preset--font-size--large)!important}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large)!important}@font-face{font-family:"entypo-fontello-enfold";font-weight:normal;font-style:normal;font-display:auto;src:url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello-enfold%2Fentypo-fontello-enfold.woff2)format("woff2"),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello-enfold%2Fentypo-fontello-enfold.woff)format("woff"),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello-enfold%2Fentypo-fontello-enfold.ttf)format("truetype"),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello-enfold%2Fentypo-fontello-enfold.svg%23entypo-fontello-enfold)format("svg"),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello-enfold%2Fentypo-fontello-enfold.eot),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello-enfold%2Fentypo-fontello-enfold.eot%3F%23iefix)format("embedded-opentype")}#top .avia-font-entypo-fontello-enfold,body .avia-font-entypo-fontello-enfold,html body [data-av_iconfont="entypo-fontello-enfold"]:before{font-family:"entypo-fontello-enfold"}@font-face{font-family:"entypo-fontello";font-weight:normal;font-style:normal;font-display:auto;src:url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello%2Fentypo-fontello.woff2)format("woff2"),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello%2Fentypo-fontello.woff)format("woff"),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello%2Fentypo-fontello.ttf)format("truetype"),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello%2Fentypo-fontello.svg%23entypo-fontello)format("svg"),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello%2Fentypo-fontello.eot),url(https://cdn.fastpixel.io/fp/ret_auto+v_881b/www.albruna.nl%2Fwp-content%2Fthemes%2Falbruna%2Fconfig-templatebuilder%2Favia-template-builder%2Fassets%2Ffonts%2Fentypo-fontello%2Fentypo-fontello.eot%3F%23iefix)format("embedded-opentype")}#top .avia-font-entypo-fontello,body .avia-font-entypo-fontello,html body [data-av_iconfont="entypo-fontello"]:before{font-family:"entypo-fontello"}#ct-ultimate-gdpr-cookie-modal-body h1,#ct-ultimate-gdpr-cookie-modal-body h2,#ct-ultimate-gdpr-cookie-modal-body h3,#ct-ultimate-gdpr-cookie-modal-body h4,#ct-ultimate-gdpr-cookie-modal-body h5,#ct-ultimate-gdpr-cookie-modal-body h6{color:#595959}

Archief voor categorie: CSS

Privacy instellingen

Met de schuifregelaar kunt u verschillende soorten cookies in- of uitschakelen:

Deze website zal

Deze website zal niet

Deze website zal

Deze website zal niet

Deze website zal

Deze website zal niet

Deze website zal

Deze website zal niet

Deze website zal

Deze website zal niet