Multiple realistic CSS styles (snippets)
All the "about:" pages are for the Pale Moon browser
Look in the code
CSS Dump | realistic | by Contion
Details
AuthorContion
LicenseCC0-1.0
Categorypalemoon.org
Created
Updated
Size62 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
rounded
gloss glossy glass round roundet glassy shine real realistic 3d
shiny shining smooth skeuomorphic skeumorph skeu
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name CSS Dump
@namespace pm
@version 1.0
@description Multiple realistic CSS styles and snippets
@author Contion
@license CC0-1.0
==/UserStyle== */
@-moz-document url("about:addons") {
*|*:root {
background-color: rgb(204, 217, 234);
background-image: -moz-linear-gradient(center top , rgb(237, 245, 252) 3px, rgba(237, 245, 252, 0) 156px), -moz-linear-gradient(left center , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2)), -moz-linear-gradient(left center 32deg, rgba(255, 255, 255, 0) 19.5%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 21.5%, rgba(255, 255, 255, 0.2) 22%, rgba(255, 255, 255, 0.2) 25.5%, rgba(255, 255, 255, 0.1) 26%, rgba(255, 255, 255, 0.1) 27.5%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 49.5%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 52.5%, rgba(255, 255, 255, 0.2) 53%, rgba(255, 255, 255, 0.2) 54.5%, rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.1) 57.5%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 87%, rgba(255, 255, 255, 0.2) 90%), url("chrome://global/skin/inContentUI/background-texture.png");
}
}
@-moz-document url("about:addons") {
*|*.main-content {
overflow: hidden;
background-color: rgba(255, 255, 255, 0.35);
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
border: 0px solid #C3CEDF;
border-radius: 8px;
box-shadow: 0 0 3px black inset
}
.category[selected] {
background-color: rgba(255, 255, 255, 0.4);
color: #252F3B;
border-color: #C3CEDF;
-moz-border-end-color: #E2E9F2;
box-shadow: 0 0 4px black;
z-index: 143;
border: 0;
/* filter: drop-shadow(0 0 2px green); */
margin-left: 5px;
border-radius: 5px 0 0 5px;
}
.alert , .amobutton{
-moz-box-align: center;
padding: 10px;
color: #373D48;
/* border: 1px solid #A8B8D1; */
border-radius: 8px;
background-image: radial-gradient(at top,#FFF, #ECF1F7);
background-clip: padding-box;
box-shadow: 0px 3px 0px #cbdce3,0px 3px 4px 1px #00000080;
/* transform: translatey(-3px); */
border: 0;
transition: all 0.3s;
}
.alert:hover {
box-shadow: 0px 3px 0px #cbdce3,0px 3px 7px 1px #00000080;
transform: translatey(-3px);
/* background-image: radial-gradient(at top,#FFF, HSL(212.7, 40.7%, 95.5%)); */
}
.addon[selected] {
background: linear-gradient(hsl(191.3, 100%, 49.8%) ,hsl(214.8, 100%, 49%));
color: black;
rborder: transparent;
box-shadow: 0 0px 2px black,0 1px 0 #fff3 inset;
}
.addon {
color: black;
border-top: 2px solid;
-moz-border-top-colors: rgba(0, 0, 0, 0.1) rgba(255, 255, 255, 0.1);
border-bottom: 1px solid;
-moz-border-bottom-colors: rgba(255, 255, 255, 0.1);
padding: 5px;
background-origin: border-box;
box-shadow: 0 0px 2px #0000,0 1px 0 #05030333 inset;
}
}@-moz-document domain("newipnow.com") {
.navbar-main .navbar-nav > li > a {
padding-top: 9px;
padding-bottom: 9px;
transition: box-shadow .21s ease-in-out;
/* opacity: 0; */
text-shadow: 0 1px 0px #b3b3b399,0 1px 1px #000000b3;
margin: 0px 3px 0 3px;
background: linear-gradient(#00dbff,#00c0ff);
border-radius: 3px;
box-shadow: 0 1px 1px #00000080,0 1px 0 #ffffff4d inset;
}
}@-moz-document url("about:stylem-edit") {
#brandLogo {
height: 37px;
width: 192px;
margin: 22px auto 31px;
/* background-image: url("chrome://branding/content/about-logo.png"); */
/* background-size: 192px auto; */
background-position: center center;
background-repeat: no-repeat;
background: radial-gradient(at top,#ffffffb3,#fff0 70%,#fff0 70%),linear-gradient(#e0f3ff,#bfd6ff),linear-gradient(white,#e8e8e8);
border: 0px solid #dadada;
border-radius: 6px;
box-shadow: 0 2px 2px -2px #00000080,0 0 2px #0000001a,0 1px #fff6 inset;
border-spacing: 17px;
/* border-style: solid; */
/* border-image: linear-gradient(red,lime) 9; */
/* outline: 2px solid #32abf0; */
/* outline-offset: 8px; */
/* outline-style: groove; */
/* -moz-outline-radius: 20px; */
}
button {
/* height: 192px; */
ywidth: 192px;
ymargin: 22px auto 31px;
/* background-image: url("chrome://branding/content/about-logo.png"); */
/* background-size: 192px auto; */
/* background-position: center center; */
/* background-repeat: no-repeat; */
yheight: 37px;
/* width: 192px; */
/* margin: 22px auto 31px; */
/* background-size: 192px auto; */
/* background-position: center center; */
/* background-repeat: no-repeat; */
/* background: radial-gradient(at top,#ffffffb3,#fff0 70%,#fff0 70%),linear-gradient(#e0f3ff,#bfd6ff),linear-gradient(white,#e8e8e8); */
border: 0px solid #dadada;
border-radius: 7px;
box-shadow: 0 2px 2px -2px #00000080,0 0 2px #0000001a,0 1px #fff6 inset;
border-spacing: 17px;
background: radial-gradient(at top,#fff0,#fff0 70%,#fff0 70%),linear-gradient(#e0f3ff00,#bfd6ff00),linear-gradient(white,#e8e8e8);
transition: box-shadow 0.4s,transform 0.5s;
}
button:active {
box-shadow: 0 1px 2px 0px #00000080 inset,0 0 3px #0000001a inset,0 1px #ffffff4d,0 0 0px 0 #00e0ff00;
transform: translatey(1px);
background: linear-gradient(hsl(0, 0%, 99%),hsl(0, 0%, 90%));
}
button:hover {
box-shadow: 0 2px 2px -2px #00000080,0 0 2px #0000001a,0 1px #fff6 inset,0 0 12px -4px #00e0ff4d inset ,0 0 8px #00a1ff00;
/* padding: auto; */
/* width: 200px; */
/* border-radius: 20px/43px; */
/* transform: rotate(360deg); */
}
button:hover:active {
box-shadow: 0 1px 2px 0px #00000080 inset,0 0 3px #0000001a inset,0 1px #ffffff4d,0 0 0px 0 #00e0ff00,0 0 12px -4px #00e0ff00 inset;
width: 192px;
}
}@-moz-document url("https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox") {
.container .checkmark::after {
left: 8px;
top: 4px;
width: 5px;
height: 10px;
border: solid #641515;
border-width: 0 4px 4px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
/* filter: drop-shadow(1px 1px 0px #000000b3) drop-shadow(-1px -1px 0px #ffffffb3); */
border-image: linear-gradient(#f8f8f8,#a3a3a3)3;
/* background-blend-mode: exclusion; */
mix-blend-mode: color-dodge;
}
.checkmark::after {
content: "";
position: absolute;
display: none;
}
.container:hover input ~ .checkmark {
background: radial-gradient(circle at top left ,#00fbffcc,40%,#079cf200 70%),linear-gradient(#a6a6a6,#292929);
background-position: 0 0 , 0 0;
background: radial-gradient(circle at top left ,#00fbffcc,40%,#079cf200 70%),linear-gradient(#161616,#090909);
background-position: 0 0 , 0 0;
ooutline: 7px dotted #4274a1;
outline-offset: 4px;
}
.container:active input ~ .checkmark {
background-color: #ccc;
box-shadow: 0 1px 2px black inset,0 1px 0px #fff6;
transform: translateY(0px);
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background: radial-gradient(circle at top left,#00fbffcc,40%,#079cf200 70%),linear-gradient(#838383,#212121);
border-radius: 5px !important;
box-shadow: 0 1px 0px #fff3 inset,0 1px 1px black;
transition: transform 0.0001s linear,background-position 0.35s ease-in-out;
background-position: -5px -5px,0 0;
background-repeat: no-repeat, repeat !important;
/* filter: grayscale(1); */
background: radial-gradient(circle at top left,#00fbffcc,40%,#079cf200 70%),linear-gradient(#161616,#090909);
background-repeat: no-repeat, repeat !important;
background-position: -5px -5px,0 0;
box-shadow: 0 1px 0px #fff3 inset,0 1px 1px black,0 2px #0b0707,0 -1px hsla(0, 0%, 100%, 0.051) inset;
transform: translateY(-2px);
}.container {
cursor: pointer;
font-size: 22px;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
/* visibility: hidden; */
}
}@-moz-document domain("userstyles.world") {
/* ==UserStyle==
@name Corial
@version 1.0.3
@namespace userstyles.world
==/UserStyle== */
/*
element {
border-bottom: 0px aquamarine ridge;
border-radius: 0px;
/* margin-top: 3px; */
/* transition: 0.3s border-radius; */
/* box-shadow: 0 -4px 4px -4px #c5ecff inset; */
nav li a:hover {
border-bottom: 3px aquamarine groove !important;
border-radius: 2px !important;
margin-top: 3px !important;
/* transition: 0.5s all; */
/*box-shadow: 0 -4px 4px -4px #c5ecff inset;*/
/* background: radial-gradient(circle at 50% 27px,#00f3ff63 -58%,#0000 60%); */
}
/*html body > main > section:first-of-type {
background: aquamarine;
margin-top: 55px !important;
}*/
.icon.flex.ai\:c {
background: none;
}
.navbar input:focus {
margin: 0 !important;
width: 192px !important;
width: 17rem !important;
margin-left: -5rem !important;
}
/*.navbar .left svg*/
.left.py\:m.ai\:c:hover > svg {
filter: drop-shadow(0 1px 0px hsl(0, 19.4%, 100%)) drop-shadow(0 -1px 0px hsl(0, 19.4%, 57.8%));
transform: translateY(1px);
}
nav .name {
margin-left: 6ex;
}
/*main h1:first-child {
margin-top: 4ex;
}*/
/*html body > main > :first-child:last-child {
margin-top: 55px;
margin-bottom: auto;
}*/
html body > main {
margin-top:65px ;
}
input:hover,
button:hover,
.input-like:hover {
border-color:var(--bg-5)
}
input:focus,
button:focus,
.input-like:focus {
border-color:var(--ac-3);
outline-color:transparent;
box-shadow:0 0 0 0.25rem var(--ac-f)
}
input:-moz-focusring,
button:-moz-focusring,
.input-like:-moz-focusring {
outline:1px solid transparent
}
form:not(.Form),
.form-wrapper:not(.Form) {
margin:1rem auto;
padding:1rem;
max-width:var(--form-max-width);
border:1px solid var(--bg-4);
background-color:var(--bg-2);
border-radius:var(--br-3);
/*! width: 0 !important; */
}
form:not(.Form...