Presentación
HTML (pincha para descargar)
Vídeo
Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
Thank You Divya thank you all for being here I hope you're having a good time so far so let me introduce myself hi my name is Leah if you've ever heard that name before it's because of one of my open-source projects some of them are listed here
I work at w3c in developer relations emulsion CSS working group and I'm editing CSS backgrounds and borders level 4 so you might be wondering what's this another 10 CSS secrets in the title why is it another what about the first ones so the that part
comes from my first talk well not my first one with in this series so it was called css3 secrets 10 things you might not know about css3 I used to give it in 2011 and early 2012 and it presented people 10 things that maybe they didn't know about css3 and
let me go over these secrets quickly so can you hear me hello ok so the first one was how you can get bouncing transitions by using cubic Bezier values out of the zero one range a bouncing transition is something like this the second one was how you can get
flexible ellipses by using percentage-based border-radius border-radius 50% the third one was how you can fake the effect of having multiple outlines by using multiple box shadows with positive spread radius a nobler fourth one was how you can make pointer
events pass through which means make elements ignore mouse clicks and hovers by using the property pointer events none the fifth one was how you can adjust tab size so that you don't have this awful tab width of 8 characters how many of you are tab people
and hate spaces for indentation a few well I don't like spaces for indentation I like tabs so I love that property subsides the sixth one was how you can style elements based on how many siblings they have not just siblings before them which is easy siblings
both before and after them the total number of siblings they have and you can do that by combining first child with aunt last child and the adjacent sibling selector the support the seventh one was how you can have custom checkboxes and radio buttons by using
the checked pseudo class and pseudo elements on on their label the eighth one was how how css3 UI gives us more cursors that we can take advantage of to improve UX in our apps six one was how you can take advantage of gradients to make background patterns
with pure CSS and the tenth one was how you can position backgrounds on like the bottom right corner and have them follow the padding instead of being stuck on the bottom right corner and the way you can do that is by using background origin so I know I went
through them and very quickly here but you can look that video up there many videos of this talk if you're interested so what is this talk this talk is kind of like a sequel to the first one and sequels are challenging so I know that for example in film
history there are many sequels that have been much worse than the first one and it was a big challenge to try to do that stock but I'm hoping it will be more like the first Star Wars sequels which were very good and not the last ones which were kind of
terrible so let's start with the first one this is a screenshot of my Google Reader and this is my Google Reader in action so why am i showing you my Google Reader it's because Google Reader has this nice effect here in the sidebar so when you scroll
down you can see that it shows you this nice shadow which indicates that you can scroll up and there's more content and yes you have a scroll but this is a nice extra effect and it has the same thing at the bottom now it doesn't have a shadow but if
I scroll up you can see that a shadow just appeared so Google is is using javascript to achieve this but you can actually achieve that with pure CSS but before we go into this let me talk about background attachment you might be wondering why is she talking
about background attachment what is there to know that background attachment come on that's one of the most basic CSS properties and yes the two first values scroll and fixed are two values you'll know when you have scroll and you scroll through the
element the background stays at the same place when you when you scroll the page itself it moves fixed on the other hand the background stays on the same place regardless of what you're doing whether you're scrolling the page or whether you're
scrolling the element itself so have you noticed what's missing here we don't have a value that lets the background scroll when you're scrolling the element itself in both cases it stays it stays at the same place and that's why backgrounds
and borders three introduce the new value background attachment local so with background attachment local when you scroll the page it behaves the same way as background attachment scroll but when you scroll the element itself background score scrolls as well
let me summarize this with a table here so for awhile I used to wonder why this value was added what are the use case as I mean sure it sounds like something that was missing but do we really need it and eventually I found a use case for it and I think it
becomes very useful so let me show you how you can create this effect step-by-step so first we need to add the shadow and I'll use a gradient for that because Bok shadow would produce a shadow that doesn't look the way we want so use a radial gradient
it's center will be at the top at the middle top corner so we'll be at 50% horizontally and zero vertically and let's start with something that goes from black to transparent and this will be very intense but we'll fix it so let's adjust
background size first and make it smaller we want it to be 100% horizontally and something like 15 pixels vertically and let's cancel background repeat' because we don't want this shadow to be repeated so it starts to look like a shadow but it's
a bit too intense so let's fix that let's move the core the color stop for transparent a bit earlier and let's make this semi-transparent black instead of pure black so now it starts looking more like a shadow let's make it even more subtle
so this looks more like what Google Reader has but if you scroll the element the shadow doesn't scroll it stays at the same place because that's how background attachment scroll behaves however if you are background attachment local now you can only
see it at the top and you can add another radial gradient at the bottom to simulate the bottom shadow it has a different center and a different background position and it shares all the other properties it's the same background size no-repeat and background
attachment local so there you go the difference is that the Google Reader shadow is more smooth when you scroll this just Scrolls with the element the Google Reader shadow is more smoothly revealed so what you can do is you can use linear gradients to mask
the shadow and the linear gradient would have a local background so when you're scrolled up they would obscure the shadow but the shadows themselves would have a scroll back a scroll background attachment so when you scroll down the gradients would mask
them but when you scroll up they wouldn't so I'm not sure if you can see the difference in the projector but the way it's revealed is much more smooth but if you just want the basic effect it's not simpler to just use two gradients and background
attachment local so what's the browser support for this well background attachment local has pretty good browser support except Firefox it's supported by pretty much every other browser in years today well ia doesn't support it but what do you
expect and CSS gradients are supported by i-10 and all our other browsers in use today but you don't really need CSS gradients for this technique to work you can just use background images the main secret behind this technique is background attachment
local that's all you need the shadow could just be a gradient and you can make it any way you want if you use a background image instead of a gradient so the caveat of the second technique is that it requires a solid background and the first one whether
you don't use gradients to mask the shadow background could be anything and I should credit Roman kumara for this technique he came up with the first first version where he used pseudo elements and not background attachment local and then I suggested we
could use background attachment local to make it simpler in instead of needing pseudo elements so let's go to the second one I'm sure you've seen this effect many times in websites it became quite fashionable like one or two years ago maybe longer
where you have fixed code fixed with content but fluid with background so the background occupies the entire width of the viewport but the content always stays at a fixed width and usually this is implemented in this way you need a wrapper element for the
background and another one for the content and the code usually looks something like this you have a wrapper element with a fixed width and margin Auto so it's centered in its container however if you think about it for a second what exactly is margin
[ ... ]
Nota: se han omitido las otras 4.528 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.