#ddd messy icons | Explore Tumblr posts and blogs

lizbotw · 4 years ago

Note

Okay. I think I’ll finally confess, because I’m way too excited for us to have matching themes. (Also gonna put that you’re my “buddy” in my description if we are gonna match themes lmao👀)Since you’re favourite character is Reiner, mine is........

......

.....Bertholdt!!!!! :DDD You’ve guessed right this whole time but it was hilarious watching the entire progress of my keeping info away from you and leaving you in the dark😌ALSO PLEASE TELL ME YOUR THINKIG PROCESS AND HOW YOU ALREADY HAD AN IDEA OF MY “TASTE” WHAT-you have idea how hard it was to keep it from you without bursting into my endles compliments I have for this tall precious boy who deserves the world🥺 I’ve been having some ideas but also wanted to let you guess..however it was too painful to wait because you were RIGHT THERE ON THE SPOT but you still were unsure and thought it might be Marco or Reiner still aha, and none of this would’ve even been possible if I never mentioned the name because apparently you didn’t even remembered that he existed in the anime😭 So underrated.....Okay I was thinking of changing my quote in the blog name to one of Bert’s quotes and maybe you could do one too? Not to mention matching icons?🥺It sounds like so much fun but idk if you’re up for it..?? 😌Anyways you’re response to my ask was so soft, I’ll just go happily cry in a corner while doing my hw-

KRISTY ISTG I’M GONNA PUNCH YOU I FUCKING KNEW IT as soon as i saw him i was like “i just KNOW kristy is heads over heels for this fucking man” what other guy would you like!!! the answer is none of them!!! only him!!! okay the rest is under the cut because this was an entire journey and a half smh but you ASKED FOR IT

my thought process? whooo this is messy but okay. also if i say it now i won’t have to say it later so i’ll just unload everything here. much easier than ranting in ur dms. also you don’t have to like... reply, you can just read it because i am just delivering what you asked for

okay i’ll confess too, i wasn’t unsure about my answer AT ALL, that was just a cover up 😭 IDK AJDNSJAJ i was so SURE it was him, but there’s always the chance there’s someone else but also literally could not see you liking anyone else. i 100% knew it wasn’t marco bc um... he’ll be gone soon ❤️ idk when but soon. so he’s not exactly a good choice for a long-term fav, but i was like let’s just add him in for some ~mystery~ and also tbh you kinda exposed urself that it’s not him when you said a long time ago that ur okay with jean-marco matching icons but that you still really want me to figure out ur fav

i was trying to figure out how to say it ¿¿¿ as soon as i saw him i was like this is it. i’ve got to tell her. but i didn’t know how to word it AJJSJDJSJ “why do i feel like you like bertholdt 🤡” “ur in love with bertholdt aren’t you 😐” “bertholdt” (that’s right. just his name. and then i’d see how you react.) “him” “reiner’s bff... u like him don’t you” ALL OF IT and we weren’t as close then so i was like AJSJJSJDJ HOW TO WORD THINGS- the amount of times i almost said it but was like hmm... nvm let’s go back to discussing eren, that’s the safest thing to talk about rn. grrr i was just “it’s bertholdt, u like bertholdt u ABSOLUTELY LOVE BERTHOLDT I KNOW IT 🤡🤡🤡” like i could not figure out how to... convey. it was just 😐🤡😐🤡😐🤡 bc it’s HIM. but i was like ur gonna hate me if i say it like that but those were my emotions BC IT’S SO OBVIOUSSSSS

AND WHAT REINER????? nooo i absolutely KNEW you did not like him, plus you said you already had ur reiner phase smh kristy u are so obvious. SO OBVIOUS KRISTY IT HURTS but you also said you were being very careful and not giving me clues??? so i was thinking maybe i’m looking at things too surface level here. I AM NEVER SECOND GUESSING MYSELF AGAIN

i knew it was a guy even tho you kept saying “they” bc YEAH INTUITION 🧘‍♀️ only maybe i’d think you like christa or whatever but idk she’s like... not the first choice. hmm WAIT LMFAO ALSO YOU ALREADY SAID HANGE WAS UR FAV FEMALE CHARACTER kristy the things you say... the clues were enough to confirm my initial suspicions 😈 man me mentioning bertholdt = opening the floodgates for you YOU WERE SO EXCITED

let it be known that i was onto you from the start 😠 if you told me it was someone else i would be like “okay... lies” but in the back of my mind i would have known you must have an intense bertholdt phase at some point. it’s him. it’s always been him.

okay let me explain my relationship with bertholdt because i didn’t forget him ENTIRELY nooo don’t think that 😭 so he shows up with his buddy reiner and talks to eren ❤️ instantly is on my radar bc talking to my boy??? already am like “kristy vibes.” cut to jean existing 🥰 am only focused on him during trost arc bc eren died :( see reiner and annie together, so cute 💞 but where is bertholdt? i decide to write a thing about my thoughts on all the characters. i end up writing a paragraph on why bertholdt is sus bc he’s all but disappeared at this point 😐 felt bad bc it felt like i was slandering him unnecessarily and i knew i should be nice to him bc you like him and i didn’t want to hurt your feelings. i stare at the draft for weeks. decide to go back and look for bertholdt bc i felt like i had missed him (this brings us to current times). i see him, think he’s an okay guy, however seeing him also just leads to me gathering even more evidence that he’s sus. am panicking bc i want to share my thoughts but i don’t know how you will react. this leads to me tentatively telling you about how i think he’s pretty cool so you can see that i am NOT a bertholdt hater. slowly start mentioning my suspicions of a few different characters, etc. you know how it goes from there. i wanted to say it was bertholdt when i sent you that message but i chickened out idk so i was like “haha, this is NOT my official guess okay <3” 😍 grrr the fact that rn i was just going to be like “it’s bertholdt kristy. i know it and you don’t have to tell me i’m right because i already know i am” because i was like okay, we’re good friends at this point, anything i say will be fine <3 plus i was tired of living with this burden of knowledge AND NOW YOU’VE TAKEN THE REVEAL AWAY FROM ME that’s it, i’m going to find a new fav and not tell you about them and make you guess who it is. this is what you deserve.

he’s always been vaguely on my radar but anyway the point is i kept trying to figure out where he was but i’m blind so therefore i assumed he was up to no good. now that i have looked for him and seen him, i still believe he is up to no good (I MEAN THIS IN A NICE WAY PLEASE DO NOT HATE ME). omg i have things to say about him but i still don’t want to be mean 😭 he must have redeeming qualities bc you like him??? but. he gives me certain ~vibes~ LIKE LITERALLY LOOK AT HIM just standing there with reiner (speaking of which reiner is not off the hook either)

gahhh okay i should really just show you the theories thing okay it’s not so much theories now that i look at it but more so my thoughts on the characters i wrote bc slowly it’s becoming more and more irrelevant the more we talk so like... give me a sec and i’ll show you. ugh you know what i won’t even bother to edit it, you’ll see my RAW thoughts 😭 they haven’t really changed much anyway because i haven’t watched much aot lately. just use ur intuition and you’ll be able to tell which thoughts have changed for me 💆‍♀️ (read as: anything i say about “where is bertholdt” = he was there all along but i accidentally ignored him) he’s so endearingly cute tho... i am infuriated because i cannot love all these characters. this show... how does it do this to me. also you said you really hope i like whoever it is and i feel like for all the other characters it’s very obvious i’d like them bc they’re all so AKDKDKDK. plus i talked about how much i loved most of them anyway, he was one of the few i barely discussed my feelings about 👀

when we were talking about him i just KNEW you wanted to scream about how much you love him. i was like “do it kristy DO IT prove me right” but ur self control is unmatched, i could never. like you sprinkled in some praise for the other characters but i knew who you were REALLY thinking about ;))))) I STILL CAN’T BELIEVE YOU TOOK AWAY THE CHANCE FOR THE REVEAL AWAY FROM ME this is the equivalent of instantly knowing the answer to a question as soon as the teacher says it but then someone raises their hand faster than you 😐

hhhggg this is getting long but you wanted to know your type as i see it? (okay i just noticed you said “taste” actually but whatever, same thing) dude, bertholdt is the BLUEPRINT for all the guys you like rn. so sweet... like ur suga selfship. it’s so clear. potentially will do something i don’t want to say evil buuuuut, like hello??? DABI. there’s more but you get the point. the day you tell me you don’t like someone like bertholdt is the day i give up on eren. HAHA THERE’S SUCH A PATTERN plus the fact that bertholdt is legit all of those qualities rolled into one??? perfection. also before i even watched the show i saw pictures of him and he looked like someone you’d like so i kind of had that idea in my head from before to look out for him but i kept forgetting his name bc i can’t spell so i was like “who was that guy again” AND I COULDN’T SEARCH HIM UP BC I DIDN’T KNOW HIS NAME... oops? wowww if i wasn’t so shy and scared of you telling me i was wrong and then never talking to me again we would have been done with this whole thing a looooong time ago damn

matching icons yes omg reiner 🥰 he’s all mine now 🥰 damn wait i just changed my icon and i kind of like the vibes it gives off for me. hmm tbf i’ve been meaning to change up my theme and make a new header but i’ve been lazy. it was going be a cute dark blue/purple halloween theme but </3 yeah. i even had the pictures ready and i just had to edit them akjajsjsj. so if you have a bertholdt quote that means i should have a reiner one right? 👀 well he’s said eren’s name before right? so i’ll just keep my current title 🥰 JKJK AJSNSJAJJA i’ll go look for something. hhhggg wait okay can we do them for november? i know i’m going to want a change when november comes 😭 it’ll be like cleanse from october bc man is life kicking my ass rn. plus if i do it rn i’m going to be obsessed with making the new theme PERFECT and i just Do Not have the time to be busy graphic designing my blog 😭 I’M SO EXCITED FOR THEM TOO but ahhh man i love designing things like this so i’m going to be so focused on that. the fact that i briefly considered changing to an eren icon at one point but then i thought you would judge me </3 yes i have a problem with my obsession, what of it also we are more than just buddies, we’re practically aot soulmates at this point because we keep liking the different halves of all the iconic pairs. jean/marco, reiner/bertholdt... um okay well only those two but yeah i’m just kidding, buddy is good hehe that’s so cute omg pls use that 🥰

okay i hope ur happy, i have just exposed all of my thoughts. this is what you deserve for your precious boy so here ❤️ also i was feeling bad and was about to ask you if it’s okay to be sus of bertholdt because he’s truly a cute baby to me plus he has ur heart so maybe he’s truly good :( but then i remembered you like the villains in bnha so i wouldn’t put it past you to like someone who may or may not do something... suspicious. so i will be deciding myself who’s sus and who isn’t 😠😌 no criticism allowed this man is UP TO SOMETHING it’s always the quiet ones

ALSO I WAS GOING TO GO BACK AND LOOK FOR HIM EITHER WAY I SWEAR not just bc you mentioned him!!! 😭 he was always in the back of my mind ❤️ well i didn’t know exactly who he was but i was vaguely like okay the tall soft one... need to look out for him for kristy’s sake. okay maybe you DID influence me in some way to go look for him because technically i only ever even considered him bc he stood out as someone you’d like. but ur right, so underrated 😭 lo siento bertholdt u are actually too cute for this world and i am a dummy for not realizing that sooner :(

anyway now back to our regularly scheduled program of me talking about the armored titan ❤️ whoever you are mr. armor pls hmu ily ❤️ poor reiner watching me be unloyal rn. so weird that i’m going through a phase for both of them but here we are. this stupid titan is the only thing i’m looking forward to in the rest of the trost arc and if he doesn’t show up i’m going to wail pls,,,,,

mwah yes do ur hw kristy very good. i will not do mine but that’s okay ❤️ ur the responsible one out of the two of us also the fact that you said my response to your last ask was soft and now here i’m boderline yelling at you about bertholdt... duality please talk to me about how much you love bertholdt now or else ❤️

#kristy i’m gonna stomp on u never send me ominous asks again my heart rate was 📈📈📈#i got the notif and i was like ‘huh??? what does she have to confess??? she wants me to stop talking about eren doesn’t she’#it doesn’t help that i obviously can’t see the whole message in the notif so i was just 😟#kristy x bertholdt supremacy ❤️#I FELT IT IN MY BONES #girl all the signs were there i am the best detective ever goodbye #I AM A GOD so smart i am amazing i should just switch to a criminal justice degree at this point #all of my theories? i now believe they are all canon. every single one of them. everything i guess i right.#you have inflated my ego and there is no going back #asks #kristy 🥰💞#twin things ✨#aot spoilers #attack on titan spoilers #bc marco </3

6 notes · View notes

i-love-your-light · 4 years ago

Note

7, 15, and 28 for the fic asks?

thank you so much!!!

7. Share a snippet from one of your favorite pieces of prose you’ve written and explain why you’re proud of it.

When Zuko was eight, he broke his arm falling from a tree. The story the doctors got was that it was an accident, and Zuko’s memory of the event is hazy enough that that might have been true. He and Azula don’t talk enough nowadays for him to seek clarity from her end. All he remembers is arguing while half way up the tree, and then her foot had -kicked back? slipped?- and hit where his knuckles were gripping a branch, and then the next second he was surrounded only by air, arm still stretched up to where it once found purchase. There’s no memory of hitting the ground, just the wide-eyed feeling of free-fall. A sense of betrayal- by his sister? by gravity?- and a sense of impending doom, with no storage in his memory banks of any resolution that followed. Only infinite suspension in time.

There’s a similar feeling rooted in his chest now, as Sokka gleefully asked, “Why is Iroh trying to make love potion tea?”

This is a ~sneak preview~ of a college!au zukka fic that is just chock full of yearning and I feel like I am very good at writing yearning because I am full of it pretty much always?? anyway i am proud of lots of moments in this fic and can’t wait to publish it but this paragraph i am especially proud of because i think it feels really vivid and the metaphor unfolds like a flower if that makes sense? like it reveals itself slowly? idk. im excited to finish this one and put it out

15. If you could choose one of your fics to be filmed, which would you choose?

This is SUCH a cool question. I picture things extremely visually and cinematically when I write so it’s easy to translate most things I write into film in my head. I’d love to see ‘beautiful things’ filmed too, or like made into a comic or cartoon. people in the comments have been lovely in saying that it felt really in character for all of them so it’d be neat to see that fic adapted into the style of an atla episode!!! or my yueki sci fi au, just so i could see the zero gravity dance floor scene on a screen.

28. Share three of your favorite fic writers and why you like them so much.

There are literally dozens I could shout out but for now:

@sword-and-stars/ haicrescendo on ao3 - everything of theirs that i’ve read i have loved. they treat trauma with gentleness and care but not a smidge of glamorization. the characters talk like people do and fuck up like people do and have messy complicated joyful terrible wonderful emotions like people do. lots of times reading their zuko characterizations is like looking in a mirror and it makes me lose my breath a bit. honestly i aspire to write like this. fave fics are: Mass Times Acceleration, Safety First, Pride is Not The Word

@crosspin- the way they write yearning takes my BREATH away okay i read Til The Gravity’s Too Much six weeks ago when it first came out and i think about it daily. Love is messy and jumbled and awkward and wonderful and delirious and all of this is captured in their writing. Feels cinematic in scope, with permanent rose tinted glasses on. I adore what I’ve read and I can’t wait to delve into DDD because i think im gonna love it too. fave fics are: Til The Gravity’s Too Much, Cut To The Feeling

and of course @hollypunkers !! we are all aware that the epic Blue is a masterpiece and i would literally drop everything i was doing each time i got a notification about an update to read it. Looking forward to doing the same with all her future atla works as well as saying i knew her when when she inevitably becomes a world famous novelist (if she wants? no pressure). Master of writing with an unreliable narrator, which i am in awe of because it’s so difficult for me not to reveal everything at once. An icon. We stan.

#ask game #sashacore #emily answers #thank you so much!!!!

1 note · View note

sdesignermagazine · 4 years ago

Photo

Level Up Your CSS Skills with these 20 Pro CSS Tips

Front-end development is quickly becoming more and more focused on efficiency – faster loading and rendering through selector choice and minimizing code. Pre-processors like Less and SCSS go a long way in doing some of the work for us, but there are plenty of ways to write minimal, quick CSS the native way. This guide covers 20 Pro CSS Tips to help you cut down on duplicate rules and overrides, standardize the flow of styling across your layouts and will help you create a personal starting framework that is not only efficient, but solves many common problems.

1 – Use a CSS Reset

CSS reset libraries like normalize.css have been around for years, providing a clean slate for your site’s styles that help ensure better consistency across browsers. Most projects don’t really need all of the rules these libraries include, and can get by with one simple rule to remove all the margins and paddings applied to most elements in your layout by the browser’s default box-model:

* { box-sizing: border-box; margin: 0; padding: 0; }

Using the box-sizing declaration is optional – if you follow the Inherit box-sizing tip below, you can skip it.

2 – Inherit box-sizing

Let box-sizing be inherited from html:

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

This makes it easier to change box-sizing when code is introduced through 3rd party plugins or applications that use different behavior.

3 – Get Rid of Margin Hacks With Flexbox

How many times have you tried designing a grid, such as a portfolio or image gallery, where you used floats and then had to clear them or reset margins to get the columns to break into the number of rows you want? Get rid of nth-, first-, and last-child hacks by using the space-between property value in flexbox:

.flex-container { display: flex; justify-content: space-between; } .flex-container .item { flex-basis: 23%; }

4 – Use :not() to Style Borders on Lists

A very common practice in web design has been to use :last-child or :nth-child selectors to undo a style previously declared on the parent selector. Think of a navigation menu that uses borders to create a separator between each link, and the second rule added to take that border off the end:

.nav li { border-right: 1px solid #666; } .nav li:last-child { border-right: none; }

This is quite messy as it not only forces the browser to render things one way, then undo it for a specific selector. Resetting styles this way is sometimes unavoidable, but for the most part, you can use the :not() pseudo-class to only apply a style to the elements you want in one single statement:

.nav li:not(:last-child) { border-right: 1px solid #666; }

This says, put a border on all the .nav list items except the last one. Simple!

Sure, you can also use .nav li + li or even .nav li:first-child ~ li, but :not() will always be more semantic and easy to understand.

5 – Add line-height to body

The one thing that leads to inefficient stylesheets is repeating declarations over and over again. The better you get at planning your project and combining rules, the more fluid your CSS will be. One way to do this is understanding the cascade and how the styles you write for general selectors can be inherited elsewhere. Line height is one property you can set for your entire project, not only to minimize lines of code but to enforce a standard look to your site’s typography.

Rather than add line-height to each <p>, <h*> and so on, add it to body:

body { line-height: 1.5; }

Note we don’t declare a unit here – we just tell it to make the line height one and a half times more than the font size for the rendered text.

6 – Vertically-Center Anything

Setting a global rule to vertically center your layout is a great way to set a foundation for elegantly set content layouts where you’re not ready to use CSS Grid.

html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

7 – Use SVG for Icons

SVG scales well for all resolution types and is supported in all browsers. So ditch your .png, .jpg, or .gif-jif-whatev files. Even FontAwesome now offers SVG Icon Fonts in FontAwesome 5. Setting SVG works just like any other image type:

.logo { background: url("logo.svg"); }

Accessibility tip:If you use SVGs for interactable elements such as buttons, and the SVG fails to load, a rule like this one will help maintain accessibility (make sure it has the appropriate aria attributes set in the HTML):

.no-svg .icon-only:after { content: attr(aria-label); }

8 – Use the “Owl” Selector

Using the universal selector (*) with the adjacent sibling selector (+) provides a powerful CSS capability that allows us to set rules for all elements in the flow of the document that specifically follow other elements:

* + * { margin-top: 1.5rem; }

This is another great trick that can help you create more uniform type and spacing. In the example above, all elements that follow other elements, like an H4 that follows an H3, or a paragraph following another paragraph, will each have at least 1.5rems of space (equal to about 30px.)

9 – Consistent Vertical Rhythm

Consistent vertical rhythm provides a visual aesthetic that makes content far more readable. Where the owl selector may be too general, use a universal selector (*) within an element to create a consistent vertical rhythm for specific sections of your layout:

.intro > * { margin-bottom: 1.25rem; }

10 – Use box-decoration-break For Prettier Wrapped Text

Say you want to apply uniform spacing, margins, highlights or background colors to long lines of text that wrap to more than one line, but don’t want the whole paragraph or heading to look like one large block. The box-decoration-break property allows you to apply styles to just the text while keeping padding and margins intact. This is particularly useful if you want to apply highlights on hover, or style sub-text in a slider to have a highlighted look:

.p { display: inline-block; box-decoration-break: clone; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone; }

The inline-block declaration allows the colors, backgrounds, margins and padding to be applied to each line of text rather than the entire element, and the clone declaration makes sure those styles are applied consistently to each line equally.

11 – Equal-Width Table Cells

Tables can be a pain to work with so try using table-layout: fixed to keep cells at equal width:

.calendar { table-layout: fixed; }

12 – Force Empty Links to Show with Attribute Selectors

This is especially useful for links that are inserted via a CMS, which don’t usually have a class attribute and helps you style them specifically without generically affecting the cascade. For example, the <a> element has no text value but the href attribute has a link:

a[href^="http"]:empty::before { content: attr(href); }

13 – Style “Default” Links

Speaking of link styling, you can find a generic a style in just about every stylesheet. This forces you to write additional overrides and style rules for any links in a child element, and when working with a CMS like WordPress can lead to problems with your king link style trumping a button text color, for example. Try this less-intrusive way to add a style for “default” links:

a[href]:not([class]) { color: #999; text-decoration: none; transition: all ease-in-out .3s; }

Now the style will only apply itself to links that otherwise have no other style rule.

14 – Intrinsic Ratio Boxes

To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:

.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

15 – Style Broken Images

This tip is less about code reduction and more about refining the detail of your designs. Broken images happen for a number of reasons, and are either unsightly or lead to confusion (just an empty element). Create more aesthetically-pleasing with this little bit of CSS:

img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; } img:before { content: "We're sorry, the image below is missing :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }

16 – Use rem for Global Sizing; Use em for Local Sizing

After setting the base font size at the root, for example html{font-size: 15px;}, you can set font-size for containing elements to rem:

article { font-size: 1.25rem; } aside { font-size: .9rem; }

Then set the font size for textual elements to em:

h2 { font-size: 2em; } p { font-size: 1em; }

Now each containing element becomes compartmentalized and easier to style, more maintainable, and flexible.

17 – Hide Autoplay Videos That Aren’t Muted

This is a great trick for a custom user stylesheet when working with content you can’t easily control from the source. This trick will help you avoid annoying your visitors with sound from an auto-playing video when the page is loaded, and again features the wonderful :not() pseudo-selector:

video[autoplay]:not([muted]) { display: none; }

18 – Use :root for Flexible Type

The font size in a responsive layout should be able to adjust to the viewport automatically, saving you the work of writing media-queries just to deal with font sizing. You can calculate the font size based on the viewport height and width using :root: and viewport units:

:root { font-size: calc(1vw + 1vh + .5vmin); }

Now you can utilize the root em unit based on the value calculated by :root:

body { font: 1rem/1.6 sans-serif; }

19 – Set font-size on Form Elements for a Better Mobile Experience

To avoid mobile browsers (iOS Safari, etc.) from zooming in on HTML form elements when a <select> drop-down is tapped, add font-size to the input styles:

input[type="text"], input[type="number"], select, textarea { font-size: 16px; }

20 – Use CSS Variables!

Last but not least, the most powerful CSS level-up comes from CSS variables, which allow you to declare a set of common property values that can be reused via a keyword anywhere in the stylesheet. Your brand may have a set of colors to be used across the project to keep things consistent. Repeating these color values over and over again in your CSS is not only a chore, but also error prone. If a color needs to be changed at some point, your forced to find-and-replace, which is not reliable or fast, and when building products for end-users, variables make customization that much easier. For example:

:root { --main-color: #06c; --accent-color: #999; } h1, h2, h3 { color: var(--main-color); } a[href]:not([class]), p, footer span{ color: var(--accent-color); }

#webdesign #tips & tricks

0 notes

gritaesegol · 5 years ago

Note

exactly :DDD I can't wait. and Barca bring their kids on the pitch so often, so it'll be sweet to see Marc up there as well with his own baby. well yes, RM is close but Messi's family alone (especially Matu) is on another level hahaha. and then you have Suarez family (iconic), Alba, Busquets and Geri/Shaki... Sergi and Coral are expecting too right? and hopefully Neymar and Davi Lucca back on board again soon :3

It’s going to be amazing to have Marc joining in the baby parades on the pitch 😍 He’s gonna be so cute 💖 Matu is just one of the best children in the world, it’s hard to compete with him 😂😂 And any family with Shaki in it is obviously going to be amazing as hell 😍 Yep, I think Sergi and Coral are having a baby too, which is going to be extra cute because of Baloo 🤗 Davi is such a sweetheart 😍��

#anonymous #asks #I REALLY LOVE BABIES 🤗

0 notes

cesarhcastrojr · 8 years ago

Link

If you’re relatively new to CSS, check out The Power of CSS Selectors and How to Use Them for a thorough primer on many of the super-selectors featured here.

1 – Use a CSS Reset

* { box-sizing: border-box; margin: 0; padding: 0; }

Using the box-sizing declaration is optional – if you follow the Inherit box-sizing tip below, you can skip it.

2 – Inherit box-sizing

Let box-sizing be inherited from html:

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

This makes it easier to change box-sizing when code is introduced through 3rd party plugins or applications that use different behavior.

3 – Get Rid of Margin Hacks With Flexbox

.flex-container { display: flex; justify-content: space-between; } .flex-container .item { flex-basis: 23%; }

Now column gutters always appear evenly-spaced. Learn more about flexbox with Master CSS Flexbox in 5 Simple Steps

4 – Use :not() to Style Borders on Lists

.nav li { border-right: 1px solid #666; } .nav li:last-child { border-right: none; }

.nav li:not(:last-child) { border-right: 1px solid #666; }

This says, put a border on all the .nav list items except the last one. Simple!

Sure, you can also use .nav li + li or even .nav li:first-child ~ li, but :not() will always be more semantic and easy to understand.

5 – Add line-height to body

Rather than add line-height to each <p>, <h*> and so on, add it to body:

body { line-height: 1.5; }

Note we don’t declare a unit here – we just tell it to make the line height one and a half times more than the font size for the rendered text.

6 – Vertically-Center Anything

Setting a global rule to vertically center your layout is a great way to set a foundation for elegantly set content layouts where you’re not ready to use CSS Grid.

html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

We go into detail about all the ways you can vertically center things in CSS Vertical Centering Everything You Need To Know

7 – Use SVG for Icons

.logo { background: url("logo.svg"); }

.no-svg .icon-only:after { content: attr(aria-label); }

8 – Use the “Owl” Selector

* + * { margin-top: 1.5rem; }

9 – Consistent Vertical Rhythm

.intro > * { margin-bottom: 1.25rem; }

10 – Use box-decoration-break For Prettier Wrapped Text

.p { display: inline-block; box-decoration-break: clone; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone; }

11 – Equal-Width Table Cells

Tables can be a pain to work with so try using table-layout: fixed to keep cells at equal width:

.calendar { table-layout: fixed; }

12 – Force Empty Links to Show with Attribute Selectors

a[href^="http"]:empty::before { content: attr(href); }

13 – Style “Default” Links

a[href]:not([class]) { color: #999; text-decoration: none; transition: all ease-in-out .3s; }

Now the style will only apply itself to links that otherwise have no other style rule.

14 – Intrinsic Ratio Boxes

To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:

.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

15 – Style Broken Images

16 – Use rem for Global Sizing; Use em for Local Sizing

After setting the base font size at the root, for example html{font-size: 15px;}, you can set font-size for containing elements to rem:

article { font-size: 1.25rem; } aside { font-size: .9rem; }

Then set the font size for textual elements to em:

h2 { font-size: 2em; } p { font-size: 1em; }

Now each containing element becomes compartmentalized and easier to style, more maintainable, and flexible.

17 – Hide Autoplay Videos That Aren’t Muted

video[autoplay]:not([muted]) { display: none; }

18 – Use :root for Flexible Type

:root { font-size: calc(1vw + 1vh + .5vmin); }

Now you can utilize the root em unit based on the value calculated by :root:

body { font: 1rem/1.6 sans-serif; }

Combine this with the rem/em trick above for greater control. See CSS Fix for iOS vh-unit Bug for tips on managing older versions of Safari.

19 – Set font-size on Form Elements for a Better Mobile Experience

To avoid mobile browsers (iOS Safari, etc.) from zooming in on HTML form elements when a <select> drop-down is tapped, add font-size to the input styles:

input[type="text"], input[type="number"], select, textarea { font-size: 16px; }

20 – Use CSS Variables!

:root { --main-color: #06c; --accent-color: #999; } h1, h2, h3 { color: var(--main-color); } a[href]:not([class]), p, footer span{ color: var(--accent-color); }

Learn more about CSS Variables on the MDN

Resources

0 notes