#css icons

[webtutorsblog]

Unlocking the Potential of CSS: A Deep Dive into Outlines, Text Effects, Fonts, Icons, and Links

Cascading Style Sheets (CSS) is a fundamental component of modern web development, empowering designers and developers to create stunning and engaging user interfaces. In this blog post, we will explore some key CSS features and techniques that play a crucial role in enhancing the visual appeal and functionality of web pages. Specifically, we'll delve into CSS Outlines, CSS Text, CSS Fonts, CSS Icons, and CSS Links, providing practical examples along the way. Let's dive in!

CSS Outlines:

CSS Outlines allow you to add visual emphasis to elements by creating an outline around them. Outlines are distinct from borders, as they do not take up any space and are typically used to highlight active or focused elements.

Example:

/* CSS */

button:focus {

  outline: 2px solid blue;

}

In this example, when a button is in focus, a 2-pixel solid blue outline will be displayed around it, indicating its active state.

CSS Text:

CSS Text properties offer granular control over the appearance and layout of text within HTML elements. From adjusting font size and color to controlling letter spacing and alignment, CSS Textprovides a wide range of options for customizing the text on your web pages.

Example: /* CSS */

h1 {

  font-size: 24px;

  color: #333;

  letter-spacing: 2px;

  text-align: center;

}

Here, the h1 element will have a font size of 24 pixels, a color of #333 (a dark gray shade), a letter spacing of 2 pixels, and will be centered within its parent container.

CSS Fonts:

CSS Fonts allow you to define the typeface, size, style, and other properties of text elements on your web pages. With CSS Fonts, you can create visually appealing and consistent typography across different browsers and devices.

Example:

/* CSS */

body {

  font-family: Arial, sans-serif;

  font-size: 16px;

  font-weight: bold;

}

In this example, the body element will use the Arial font (or a sans-serif fallback), have a font size of 16 pixels, and be displayed in bold.

CSS Icons:

CSS Icons offer a lightweight and scalable way to incorporate visual symbols and icons into your web pages. By leveraging CSS properties like content, font-family, and ::before or ::after pseudo-elements, you can easily include icons without relying on external image files.

Example:

/* CSS */

.button::before {

  content: "\f138";

  font-family: "Font Awesome";

  margin-right: 5px;

}

In this example, we use the Font Awesome icon font to add an icon before the content of an element with the class .button. The Unicode value \f138 represents the specific icon to be displayed.

CSS Links:

CSS Links allow you to customize the appearance of hyperlinks on your web pages, making them visually distinctive and engaging. CSS properties like color, text-decoration, and hover pseudo-classes enable you to control link styles based on different states.

Example:

/* CSS */

a {

  color: blue;

  text-decoration: none;

}

a:hover {

  color: red;

  text-decoration: underline;

}

In this example, all links (<a> elements) will be displayed in blue without underlines. However, when a user hovers over a link, it will turn red and have an underline, indicating the interactive state.

Conclusion:

CSS Outlines, CSS Text, CSS Fonts, CSS Icons, and CSS Links are powerful tools that allow you to enhance the visual presentation and functionality of your web pages. By understanding and utilizing these CSS features effectively, you can create engaging and visually appealing user interfaces. Experiment with these examples, customize them to suit your needs, and explore further possibilities to elevate your web design skills. Happy coding with WebTutor.dev!

Don’t Miss to Read

Learn Free Online CSS Tutorial

Learn Free Online CSS Outline Tutorial

Learn Free Online CSS Text Tutorial

Learn Free Online CSS Icons

Learn Free Online CSS Links

#Free CSS Tutorial #Online CSS Tutorial #Online CSS Outlines #CSS Outlines #Free CSS Outlines Learn #CSS Text #Learn CSS Text #Online CSS Text #Free learn CSS Text #CSS Text Property #CSS Fonts #Learn CSS Fonts #Online CSS Fonts #CSS Fonts tutorial #CSS Icons #Learn CSS Icons #Online CSS Icons #CSS Icons Tutorial #CSS Links #Learn about CSS Links #Online CSS Links #CSS Links Free Tutorial.

[skynobi]

get neobrutalized. idiot

#i bought a new e ink reader so i made myself a new skin #ao3 #had 2 censor the freak tags. u kno how it is #can we talk for a second about how ao3 icons are just css cropped portions of one png

[wonhoutboy]

page_02: epitaph by wonhoutboy

light version: live preview / code dark version: live preview / code

• psd color/action preview; • 4 different models of psd coloring preview (2 still images, 2 gifs); • 1 action preview with before and after; • download button; • left sidebar; • white / black background options; • can be used as a base code as long as you credit me; • images used in the preview: x x x x x.

!! if you find any bugs/if anything doesn't go well or if you just struggle with customizing it, please reach out to me via private message or ask and i'll gladly help!

#code #page #psd coloring #dark mode #sidebar #left sidebar #icon #gif #page code #codes #css #html #pages

[earlicking]

halflife_crowbar.png

#y2k #y2k icons #2000s aesthetic #y2k nostalgia #retrogaming #2000s #art #half life #css #csgo #pcgaming #pc #steam #xbox

[divinector]

CSS Icon Hover Animation

#css icon hover #css animation examples #pure css animation #social media icon hover #animation #css animation #css animation tutorial #html css #css tricks #frontend #webdesign #webdev

[donutdrawsthings]

I've made a side blog for all the free resources I've made over the years! @donut-toast-resources

I just thought it'd be handy to gather them all in one place

#free resources #resources #art resources #talkies #donut-toast-resources #i also messed with css for the first time! it was really exciting! #also please check out my friends! they made the icon and banner!

[tnwnx]

actually dont go on my blog my themes a mess. im working on it

#this blog is from when i was 16 and taught myself CSS and i thought a dashed border was the shit #instead it makes things sort of look like everything is a draft #currently reediting the base tunglr theme on my test blog #current struggle: cant remove border from icon after changing icon shape #txt

[codingflicks]

Social Media Button Animation

#social media icon hover #html css #codingflicks #css #html #css3 #frontenddevelopment #frontend #html css animation #css animation examples #css buttons #html5 css3 #css animation tutorial #neduzone

[kamiya-memo-nagoya]

googleフォントにいつのまにやらアイコンが追加されていた。 現在は基本 font wesome4.7 を 利用しているがもう更新がされないのと表示の仕方がコードを毎回探さないと行けなくてめんどくさいと言う点からこちらを見つけて感動した。

アイコン名を疑似要素に入れたら表示されるとはなんて素晴らしい使いやすさだろう。メンテナンスもしかりコードフレンドリーにもつながる。

ちょっとまだ実装する前の読み込み速度やテストを行っていないのでなんとも言えないが、これはfontawesomeが終わる時代も近いかもしれない。

今後の参考までにメモする。

#webicon #icon #css

[pixiel]

I created a Userstyle for the Chrome/Firefox Stylus Extension that reverts the new dashboard to the old format. This took a lot of tweaking and it's not perfect at all, but if anyone wants it I'll be uploading it soonish now!

You need to have Stylus installed. So if you don't have it:

Install the Stylus Firefox Addon or the Chrome Extension (You can install Chrome Extensions on Edge as well)

Once it's installed into Firefox/Chrome/Edge you can proceed with adding this style or any other.

To add the style, follow the instructions:

Go to this link: https://userstyles.world/style/11286/old-tumblr-dashboard-july-2023

Click on "install".

Style will open a tag with it and in the left side you'll have a button that says "install style", click there. (Step-by-step copied from the lovely dorothyoz39 who wrote this in a reply!) If you don't want the sticky header you can remove the labelled script at the top of the css below /* Sticky Header*/

Be sure to check for updates regularly, I'm fixing things as I go! And because everyone keeps asking here's how to support me on Ko-Fi https://ko-fi.com/pixiel !

To update click the Manage button on Stylus and click the check for update button below then click again to install! If you experience any bugs let me know - feel free to edit it yourself as well! P.S. This userstyle works just fine alongside Xkit!

NEW UPDATE: 27/04/24, 2:15AM BST v11.6

v9.6: Moved the Following | For you | Your Tags to below the create a post panel. Fixed the Accounts Menu! + Bugfixes V10.3: Patio compatibility. Added a way to hide the Patio button & "patio feedback?" button, just search for patio in the code and follow the instructions! v11.0: Temporary Chat feature fix after Tumblr broke it, fixed some positioning issues and j/k scrolling!

UPDATE (12/04/2024): YOU CAN NOW UPDATE YOUR OLD TUMBLE DASHBOARD AGAIN!! After letting the server rest everything is now fixed. I will be leaving the Tampermonkey Backup still up but it will have less-frequent updates to remain a backup so please use the Stylus version!

If anyone wants to help test out a new feature (Post width, dashboard positioning, etc) it would be super helpful! Read more about it here and shoot me a message!

THE CREATOR OF THIS USERSTYLE SUPPORTS THEIR TRANS SISTERS. WE'RE ALL IN THIS TOGETHER!

Thank you dragongirlsnout for all your work on Dashboard Unfucker it was amazing working towards the same goal of fixing this website with you! As a Trans person (Agender, They/Them) I am saddened by the issues trans women have been facing on this site and the women who have been bullied into leaving Tumblr for good. I wish the best for you in all that you do next!

Check the readmore for the changelog, custom code & known issues!

----- Known issues:

Only two columns in Masonry view. Unfixable, Tumblr creates columns based on monitor size, if I try adding another column (because it doesn't exist) it just perpetually loads on screen. Tempfix: Zoom out in chrome/firefox and it adds more columns

Search bar doesn't appear on some pages (like viewing a post), this is because Tumblr removed the search bar on those pages completely. Unfixable!

Tumblr has ONCE AGAIN CHANGED THE ACCOUNTS MENU. The menus are now shorter and have less information on them. This is unfortunately permanent. I do not see any way to fix this. Unfixable.

If you want people's icons to stay fixed in place, instead of scrolling with the dashboard add;

.FtjPK .AD_w7 .JZ10N, .RYkKH > .nZ9l5 { top: 0px !important; position: relative !important; }

to the top of the code! You can also create a second userstyle by clicking the 'tumblr.com' part of the link in 'Write new Style' and adding the code in there! That way you don't have to worry about re-adding it when you update.

Solved issues: (Update)

Menus need to be manually closed SOLVED! in V.4 and updated in V.5! The menu & icon WILL scroll with you if you have removed the sticky header CSS, however, clicking anywhere on screen will make the Menu disappear still.

Masonry view in searches is now fixed!

Resized Messenger Chat Box!

NEW UPDATE 16/08/23, 23:55 BST v6.5: Figured out how to reorganise the icons in the header. Let me know if you have any problems with it and make sure to update your Userstyle! Some icons are hidden with Display: Block; you can hide more icons with this method!

Solved issues p2

Brought back SOME of the icons for Tumblrs latest update - Unfortunately, this does not bring back user icons for Reblogged posts! Make sure to yell at Tumblr for removing the icons as well as the horrible dashboard update here! v7.5 Fixed icons for all posts and put them back where they came from!

v6.9.6.9 (I promise this is the last funny number): Fuck Off Buggy The Clown Update + All languages support for the old header design!

v7.0: Fixed the search bar for tumblrs new collections feature, so it looks like the original search bar!

v8.0: Fixed masonry view icons, hidden the reblog icon on dashboard icons, fixed icons in blog viewport

V8.1: Fixed issue with icons not working on soft-refresh & with endless scrolling disabled - be sure to complain to staff!

v9.3: Changed a few things with the search feature, I also made the posts less round.

UPDATE2 11/04/2024: SO We mighhtttt have overrun their servers. 😅 I'm getting a 500 Internal Server Error every time I try to fix it or upload it as a new style - the massive influx of people downloading the userstyle was probably too much. The Tampermonkey backup on Greasyfork works just fine though! Probably easier for a lot of people migrating anyway! UPDATE 11/04/2024:: My code has broken on Userstyles.world, (it is now fixed as of 12/04/24) until this is fixed I have created a Tampermonkey Backup Version of the Userstyle so feel free to use this version if you've broken yours!

https://greasyfork.org/en/scripts/492279-old-tumblr-dasboard-backup

#tumblr #dashboard #tumblr dashboard #stylus #stylish #userstyles #userstyle

[mossymanor]

Current progress on the welcome page - currently working on the siding and steps, then I still need to find a porch floor and finalize the logo on the sign, but otherwise I think it's coming along ok!

#it's been taking a while to find images that are exactly what I want #the struggles of doing collage instead of just drawing everything 😔 #after this i'll work on the css style for the actual site #i just wanted to get this done first so i could have some graphics for this blog like for the banner and maybe the logo for an icon #wip

[iidsch]

kind of unbelievable how every single toyhouse code tutorial is so astonishingly bad

#m #the most useful thing ive found so far is a link to another website that teaches the very basics of css #but so many tutorials are just. copy someone else's code and edit it #or a list of resources like fa icons and stuff #nothing about how to build a (simple) code from scratch #so annoying 🙄 i guess i'll just look at people's code and do trial and error till i get it

[jckeperalta]

new desktop theme by @atlasthemes, new mobile header by @bluejane and new icon made by me <3

#btw this is literally what i mean it's hard to find new resources. both blogs are deactivated #but i still give credit bc i would feel weird if i didn't lol #anyways how you like the icon? it's the best i can do lol but i think it's soooo cute <3 #i spent DAYS trying to find a cute dean icon but i just couldn't #also i customized the theme and i think i did pretty good considering i don't know html or css?? #there's one tiny detail that needs fixing and bugs me but oh well. maybe another day #btw sorry for being stuck in 2016 still ig #also i might change url soon but i still haven't made up my mind #ALSO do you have a folder with all your previous tumblr icons on your high school laptop you literally don't use anymore or are you normal #updates

[chantastic]

#webdevelopment #svg #icons #astro #html css

[divinector]

CSS Social Media Icon Animation

#social media icon hover #icon hover animation #icon hover effect #animated social media buttons #learn to code #html css #frontenddevelopment #code #divinectorweb #css #css3 #html #css animation #css animation examples #css animations

[its--ali]

me: has not actively touched an rp blog in approx. 4 years

also me: considering reviving an old character in a new blog for the fuck of it

#i shouldnt..... #but also.... whos stopping me #i think i still. have all my old icons too #itd be fun to dust off my html/css skills too #hmhmhmmmmmmmmmmmm