spaceninja + borders   17

Sub-pixel rendering and borders
It is highly probable that the reason using thin seems to resolve the disappearing border issue is that each browser resolves the keyword in a manner that fits its own rendering engine’s calculations. So even though thin and 1px should have the same result, using thin is a better option.
fridayfrontend  css  sub-pixel  borders  browsers 
16 hours ago by spaceninja
Designing button focus states for better usability
So what would we need to do to have a focus state that people can see? The main guidelines I use are: 1)If you're relying on color to signify a change in state, the color contrast ratio between the default color and the focus color needs to be at least 3:12. 2) Make sure that any outlines are thick enough to actually see. There aren't any official guidelines on this, but at least use something larger than 1px.
fridayfrontend  css  cssbasics  accessibility  contrast  buttons  focus  outline  borders 
april 2019 by spaceninja
Blurred Borders in CSS
Say we want to target an element and just visually blur the border of it. There is no simple, single built-in web platform feature we can reach for. But we can get it done with a little CSS trickery.
fridayfrontend  css  borders  blur  filters  clip-path 
march 2019 by spaceninja
Stacked "Borders"
It turns out there are a number of tricks to create the effect of stacking one border atop another by combining a border with some other CSS effects, or even without actually requiring the use of any borders at all. Let’s explore, shall we?
fridayfrontend  css  cssbasics  borders  focus  outline  box-shadow 
march 2019 by spaceninja
Gradient Borders in CSS
Let's say you need a gradient border around an element. My mind goes like this: There is no simple obvious CSS API for this. I'll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding around it.
fridayfrontend  cssbasics  css  gradients  borders  border-radius  border-image 
december 2018 by spaceninja
Use Inner Shadow instead of borders on images
If you're working with images that sometimes bleed into the background, try using a subtle inner shadow to create some distinction instead of a border. Borders will often clash with the image, while most people will barely realize the shadow is even there.
images  design  borders 
november 2018 by spaceninja
Even More CSS Secrets
The premise is simple: Ten surprising yet practical things you didn’t know you could do in CSS, live-coded in Lea’s trademark interactive presentation style. This third installment of the series will include new juicy secrets related to CSS Variables, grid layout, variable fonts, blending modes, SVG, and many other things.
fridayfrontend  video  css  blendmodes  svg  emoji  borders  animation  focus-within  variablefonts  flexbox  cssgrid  conic-gradient  gradients 
august 2018 by spaceninja
4 CSS tricks I’ve learnt the hard way
1) No borders; 2) Animated throbber; 3) Horizontal & vertical centering; 4) Positioning relative to a parent;
css  cssbasics  borders  animation  centered  position  fridayfrontend 
july 2018 by spaceninja
Content, Padding, Margin and Border: the Box Model
In this article I will be focusing on the major differences between content, padding, margin and border in the simplest way possible for front-end developers, but no matter your role feel free to read.
css  cssbasics  boxmodel  content  borders  margins  padding  fridayfrontend 
april 2018 by spaceninja
7 Practical Tips for Cheating at Design
Improving your designs with tactics instead of talent.
design  ui  color  shadows  borders  icons  buttons  tips 
march 2018 by spaceninja
Animating Border
"The challenge: building a button with an expanding border on hover. Simple, right? You might be unpleasantly surprised."
fridayfrontend  css  animation  borders  buttons  hover 
december 2017 by spaceninja
A Table With Borders Only On The Inside
You know, like a tic-tac-toe board. I was just pondering how to do this the other day, as one does. There are three ways I can think of. One involves a good handful of rules and is the way I intuitively think of, one involves a deprecated attribute, and one is very simple and feels kinda like a CSS trick.
fridayfrontend  css  tables  borders 
january 2017 by spaceninja
In search of the perfect radius
In the figure below, which button looks right? Had you ever had to design such a button or in general, a rounded rectangle nested inside another rounded rectangle and wondered what should be the inner radius for a given outer radius or vice versa? That is what we’re going to find out.
css  border-radius  nested  design  borders 
july 2014 by spaceninja
CSS Arrow Please!
Nice little webapp to automatically generate the CSS for a box with an arrow, including the ability to add borders.
webapps  css  generator  generated  before  after  arrows  borders 
march 2013 by spaceninja
Box Sizing
The box-sizing CSS3 property can do just this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. We can now safely declare our textarea to be of 100% width, including pixel-based padding and margin, and accomplish out layout perfectly.
css  box-sizing  border-box  boxmodel  padding  borders  margins  layout 
february 2012 by spaceninja
Controlling width with CSS3 box-sizing
An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not.
css  box-sizing  forms  boxmodel  padding  width  borders 
october 2011 by spaceninja

Copy this bookmark: