User-select property – prevent text selection To prevent text selection, you can add CSS: p { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } on specific class .prevent-select {-webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ […]
Articles Tagged: CSS
Add Custom CSS to WordPress Admin
Step 1: Create Your CSS File You can place the CSS file wherever you’d like; I’ve chosen to place the CSS file within my theme. My admin CSS file looks like: The CSS above makes tags more visible. It also will make any PRE element without a class more apparent, teling me I need to […]
Add custom css file in theme
Surprising CSS properties you can use today
filter: sepia(1); – 78% browser support CSS filter effects can be used to apply effects like blur, grayscale, brightness, contrast and hue. I remember a few years ago I was asked to create a blur effect as an element that overlays the page content. CSS was no help as none of the browsers supported blur. […]
CSS Protips
A collection of tips to help take your CSS skills pro. Use :not() to Apply/Unapply Borders on Navigation Add Line-Height to body Vertically-Center Anything Comma-Separated Lists Select Items Using Negative nth-child Use SVG for Icons Use the “Lobotomized Owl” Selector Use max-height for Pure CSS Sliders Inherit box-sizing Equal Width Table Cells Get Rid of […]
CSS Refresher Notes
Table of Contents Positioning Display Floats CSS Selectors Selector efficiency Repaints and Reflows CSS3 Properties CSS3 Media queries Responsive Web Design CSS3 Transitions CSS Animations Scalable Vector Graphics (SVG) CSS Sprites Vertical Alignment Known Issues Positioning CSS Position allows up to 5 different values. But essentially only 4 values are commonly used. div { position: […]
Custom CSS login page
Custom CSS for the login page and create wp-login.css in your theme folder function wpfme_loginCSS() { echo ‘<link rel=”stylesheet” type=”text/css” href=”‘.get_bloginfo(‘template_directory’).’/wp-login.css”/>’;; } add_action(‘login_head’, ‘wpfme_loginCSS’);
Multiple Backgrounds
Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this: #box { background: url(icon.png) top left no-repeat, url(texture.jpg), url(top-edge.png) top left repeat-y; } They are comma separated values and there can be as many as you want with different URL’s, positioning, and repeat values. You can even […]
Flip an Image
img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: “FlipH”; }
“Stitched” Look
.stitched { padding: 20px; margin: 10px; background: #ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px dashed #fff; border-radius: 10px; box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); text-shadow: -1px -1px #aa3030; font-weight: normal; }