#learn CSS colors
Explore tagged Tumblr posts
Text
Exploring 10 Sophisticated CSS Properties with Webtutor
In the ever-evolving landscape of web design, CSS (Cascading Style Sheets) stands as a cornerstone for creating stunning and visually captivating websites. As a web designer or developer, having a firm grasp of CSS properties is crucial to craft unique user experiences and bring your creative vision to life. In this blog post, we will delve into advanced CSS properties that can elevate your design game to new heights. Plus, we will introduce you to WebTutor, the ultimate online platform for mastering code and unleashing your web design potential.
Flexbox (display: flex)
Gone are the days of complex float-based layouts. With the 'display: flex' property, Flexbox simplifies the way you structure layouts, align content, and distribute space within a container. Designers can create responsive and dynamic designs, making it easier to build everything from navigation bars to complete page layouts.
Grid Layout (display: grid)
For those craving even more control over layouts, the 'display: grid' property offers a powerful solution. Grid Layout divides a web page into rows and columns, allowing designers to arrange content in a grid format. This approach grants unparalleled control over alignment, spacing, and responsiveness.
CSS Variables (custom properties)
CSS Variables, also known as custom properties, enable designers to define reusable values within stylesheets. This advancement allows for easier theming, dynamic theming, and quicker updates across an entire website. By centralizing key values, designers can swiftly adjust colors, fonts, and other design elements across the site.
Transitions and Animations (transition, animation)
Creating engaging user experiences often involves smooth transitions and animations. With the 'transition' and 'animation' properties, designers can add eye-catching effects to various elements, enhancing user engagement and guiding their attention to important content.
Box Shadow (box-shadow)
Box shadows add depth and dimension to design elements, making them stand out from the page. This property enables designers to create subtle or bold shadows that can make buttons, cards, and other elements pop, adding a touch of elegance to the overall design.
Background Blend Mode (background-blend-mode)
Background images can play a significant role in design aesthetics. The 'background-blend-mode' property lets designers blend background images with background colors in creative ways, resulting in captivating visual effects and unique design elements.
Transform (transform)
The 'transform' property opens up a world of possibilities for manipulating elements in 2D and 3D space. Designers can rotate, scale, skew, and translate elements to achieve striking visual effects that captivate users' attention and create a sense of interactivity.
Custom Fonts (font-face)
Typography is a cornerstone of web design, and the 'font-face' property allows designers to use custom fonts that might not be available on users' devices. This property ensures consistent typography across different platforms, enhancing the website's visual identity.
Gradients (linear-gradient, radial-gradient)
Gradients are versatile tools for adding depth and visual interest to backgrounds, buttons, and other design elements. With 'linear-gradient' and 'radial-gradient' properties, designers can experiment with color blends, creating stunning visual effects that catch the eye.
Scroll Snap (scroll-snap-type)
Enhancing user experience is paramount in modern web design. The 'scroll-snap-type' property assists in creating smoother scrolling experiences by snapping to predefined points on a page. This is particularly useful for websites with sections or galleries that need precise alignment during scrolling.
Introducing WebTutor: Your Pathway to Mastery
Now that you've discovered the power of these 10 advanced CSS properties, it's time to turn your knowledge into skills. Meet WebTutor, the ultimate online platform for learning code. With WebTutor, you'll embark on a transformative learning journey, guided by industry experts who are passionate about helping you master web design, development, and more.
Why Choose WebTutor?
Comprehensive Curriculum: WebTutor offers a curated curriculum that covers everything from the basics to advanced topics, ensuring you have a strong foundation for your journey into web design.
Interactive Learning
Dive into hands-on coding exercises and real-world projects that give you the practical experience needed to excel in the field.
Expert Instructors
Learn from experienced professionals who are dedicated to your success. WebTutor's instructors are there to answer your questions, provide guidance, and share industry insights.
Flexible Learning
Whether you're a full-time student or a working professional, WebTutor's flexible learning options allow you to study at your own pace, making it convenient to achieve your goals.
Community Support
Join a vibrant community of learners, collaborate on projects, share ideas, and celebrate your milestones together.
Conclusion
Mastering CSS properties opens the door to a world of creative possibilities in web design. As you explore these advanced properties, remember that practice makes perfect. And there is no better way to practice than through WebTutor, where you'll gain the skills and confidence to build beautiful, responsive, and user-friendly websites. Start your journey with WebTutor today and take your web design skills to new heights!
Learn more with WebTutor
Ultimate Guide to CSS Animations
Latest CSS Tricks and Features
Latest CSS Trends
Create Stunning Websites with CSS for Beginners
#Css Tutorials#Learn online CSS#learn the basics of CSS#Basics of CSS Syntax#learn CSS Selectors online#mastering the syntax of CSS#important aspect of CSS#learn CSS colors#online CSS colors#Learn Online CSS#Online CSS Tutorial#Introduction to CSS
0 notes
Text
now that i have tampermonkey ive spent the past like hour trying to figure out how to use it to update the dark mode palette to include the navy again because i hate that it's just black. i looked at tumblr's CSS and literally the dark mode palette takes the "navy" variable and just sets it to 0, 0, 0 AKA black. i can edit it in the inspector (which is how i know exactly what they did) but i haven't figured out tampermonkey syntax/functionality to the extent i know how to script it to do this. this is a reasonable rabbit hole to be going down 30 minutes after i am supposed to be in bed
#like goddamn this UI update is so bad im learning more about web development to try and revert it#also any resources on tampermonkey helps BTW i dont know how to use it to update CSS variables if thats even possible#i might have to make my own variable and manually tell it in every reference to the old one to use mine instead but that seems wrong#anyway i am taking a metaphorical knife to this website#like the dark mode palette entries for navy and other color variables is what i want to update but i cant figure out how to do that#maybe i need to make my own stylesheet with its own set of variables and tell tumblr to load that sheet instead of the one it normally does#which is still a thing i don't know the proper syntax for so.
12 notes
·
View notes
Text
Hot Pink website progress 💗
been working on this website since 25 December and I just wanna show you all the progress 🤗🤗 (let's ignore the HTML behind cause I SWEAR YOU ALL GONNA HAVE A HEADACHE 😭😭)
XXX that's not the official colour choice btw cause my damn eyes also seem to not stand it. I'm just practicing what I have learned and putting it out in practice 🩷!!
This year my goal is to at least finish one of my projects cause the amount of unfinished HTML projects are starting to haunt me down now 😭😭
#codeblr#html css#learn coding#hot pink#eyestrain#bright colors#tw flashing#tw eyestrain#tw flickering
6 notes
·
View notes
Note
I came too late to the puzzle to help solve it, but what has been found already? I still would like to see it for fun.
ive had this in my drafts since the bow page was found and im sorry i forgot to post it ehe... still it’s never too late to try it yourself or take a look and see what else you find. there’s still a good chunk of small stuff that’s been missed!
here are the 9/15 pages found so far :D
some of these pages served as hints and others led to ~Bonus TWTT Content~ (and maybe something else :3)
would love to know what u do/don't end up finding :D
#the first one cuts off weird because i have a bunch of other secret pages that are just secret for the sake of being secret#made em a few years ago when i first learned about custom css#if anyone finds them by chance though enjoy the robyn lore (various random pages of me being insane)#answered#the twtt puzzle incident 2023 (colorized)
7 notes
·
View notes
Text
i think if i make my neocities site cool enough ill ditch my carrd for real actually
#like i could just. add it as a page on the site. and like i dont wanna link to my carrd AND my website everywhere lol thats dumb#the gamer speaks uwu#coding it is so fun tho its frustrating as fuck bc i forgot how inherently annoying coding is but well its still ok ^__^#css die and go to hell CHALLENGE !!!!!!!!!!!!!!!!!!!!!!!!!!!#html my babygirl. javascript my soon to be babygirl idk how to write it really just edit and read through it#like i was obsessed with scratch when i was little and learned it on my own so like that alone already is like#just fully if then statements#if then statements my so beloved theyre so simple i should learn js properly lol#i need to tho i need to integrate the auto post archival script i found into my thing but the js is like#not cooperating with my css . and my css broke lmao#so i have deleted everything and restarted so rn i just have my main page done and the style sheet is in the main html#not ideal ! not ideal at all but it works bb#like see#i want multiple pages and i want to be able to blog here and there to go more in depth about my art if i feel like it#to achieve this i need every page on the site to have the same color palette decor etc#i could one by one update each page to style them individually but if i ever change my layout. i have to update it one by one#and if i make blog posts those are in theory a new page every post as well. so you see this is innefficient and sucks in the long run#easy in the short term or for a small site tho !#so i need to make a css file to collect everything where i only have to change the css to style every single page on the site linked to it#i had this working for a minute but for some reason my main page wouldnt link to my css file OUT OF NO WHERE ???#but the js file that formats the blog posts see it has like a specific format for text and everything so they look right#and i think this conflicted with some info in my css file that ALSO specifically formats some text#so it fucked everything up !#so im right now just with p much an individual page for html and css and im going to start again#copy my css i have right now first of all into an actual css file. link it to the html#then i really really have to scour and gut the script file before implementing it so we dont have everything break again#decent plan i have the energy to do actual work now tho so i wont be doing it until later when i burn out of drawing and need to do smth#tech shid#screaming in the tags
3 notes
·
View notes
Text
Managing User Focus with :focus-visible
New Post has been published on https://thedigitalinsider.com/managing-user-focus-with-focus-visible/
Managing User Focus with :focus-visible
This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo Classes. In this post we are going to look at :focus-visible and how to use it in your web sites!
Focus Touchpoint
Before we move forward with :focus-visible, let’s revisit how :focus works in your CSS. Focus is the visual indicator that an element is being interacted with via keyboard, mouse, trackpad, or assistive technology. Certain elements are naturally interactive, like links, buttons, and form elements. We want to make sure that our users know where they are and the interactions they are making.
Remember don’t do this in your CSS!
:focus outline: 0; /*** OR ***/ :focus outline: none;
When you remove focus, you remove it for EVERYONE! We want to make sure that we are preserving the focus.
If for any reason you do need to remove the focus, make sure there is also fallback :focus styles for your users. That fallback can match your branding colors, but make sure those colors are also accessible. If marketing, design, or branding doesn’t like the default focus ring styles, then it is time to start having conversations and collaborate with them on the best way of adding it back in.
What is focus-visible?
The pseudo class, :focus-visible, is just like our default :focus pseudo class. It gives the user an indicator that something is being focused on the page. The way you write :focus-visible is cut and dry:
:focus-visible /* ... */
When using :focus-visible with a specific element, the syntax looks something like this:
.your-element:focus-visible /*...*/
The great thing about using :focus-visible is you can make your element stand out, bright and bold! No need to worry about it showing if the element is clicked/tapped. If you choose not to implement the class, the default will be the user agent focus ring which to some is undesirable.
Backstory of focus-visible
Before we had the :focus-visible, the user agent styling would apply :focus to most elements on the page; buttons, links, etc. It would apply an outline or “focus ring” to the focusable element. This was deemed to be ugly, most didn’t like the default focus ring the browser provided. As a result of the focus ring being unfavorable to look at, most authors removed it… without a fallback. Remember, when you remove :focus, it decreases usability and makes the experience inaccessible for keyboard users.
In the current state of the web, the browser no longer visibly indicates focus around various elements when they have focus. The browser instead uses varying heuristics to determine when it would help the user, providing a focus ring in return. According to Khan Academy, a heuristic is, “a technique that guides an algorithm to find good choices.”
What this means is that the browser can detect whether or not the user is interacting with the experience from a keyboard, mouse, or trackpad and based on that input type, it adds or removes the focus ring. The example in this post highlights the input interaction.
In the early days of :focus-visible we were using a polyfill to handle the focus ring created by Alice Boxhall and Brian Kardell, Mozilla also came out with their own pseudo class, :moz-focusring, before the official specification. If you want to learn more about the early days of the focus-ring, check out A11y Casts with Rob Dodson.
Focus Importance
There are plenty of reasons why focus is important in your application. For one, like I stated above, we as ambassadors of the web have to make sure we are providing the best, accessible experience we can. We don’t want any of our users guessing where they are while they are navigation through the experience.
One example that always comes to mind is the Two Blind Brothers website. If you go to the website and click/tap (this works on mobile), the closed eye in the bottom left corner, you will see the eye open and a simulation begins. Both the brothers, Bradford and Bryan Manning, were diagnosed at a young age with Stargardt’s Disease. Stargardt’s disease is a form of macular degeneration of the eye. Over time both brothers will be completely blind. Visit the site and click the eye to see how they see.
If you were in their shoes and you had to navigate through a page, you would want to make sure you knew exactly where you were throughout the whole experience. A focus ring gives you that power.
Demo
The demo below shows how :focus-visible works when added to your CSS. The first part of the video shows the experience when navigating through with a mouse the second shows navigating through with just my keyboard. I recorded myself as well to show that I did switch from using my mouse, to my keyboard.
Video showing how the heuristics of the browser works based on input and triggering the focus visible pseudo class.
The browser is predicting what to do with the focus ring based on my input (keyboard/mouse), and then adding a focus ring to those elements. In this case, when I am navigating through this example with the keyboard, everything receives focus. When using the mouse, only the input gets focus and the buttons don’t. If you remove :focus-visible, the browser will apply the default focus ring.
The code below is applying :focus-visible to the focusable elements.
:focus-visible outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold;
If you want to specify the label or the button to receive :focus-visible just prepend the class with input or button respectively.
button:focus-visible outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; /*** OR ***/ input:focus-visible outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold;
Support
If the browser does not support :focus-visible you can have a fall back in place to handle the interaction. The code below is from the MDN Playground. You can use the @supports at-rule or “feature query” to check support. One thing to keep in mind, the rule should be placed at the top of the code or nested inside another group at-rule.
<button class="button with-fallback" type="button">Button with fallback</button> <button class="button without-fallback" type="button">Button without fallback</button>
.button margin: 10px; border: 2px solid darkgray; border-radius: 4px; .button:focus-visible /* Draw the focus when :focus-visible is supported */ outline: 3px solid deepskyblue; outline-offset: 3px; @supports not selector(:focus-visible) .button.with-fallback:focus /* Fallback for browsers without :focus-visible support */ outline: 3px solid deepskyblue; outline-offset: 3px;
Further Accessibility Concerns
Accessibility concerns to keep in mind when building out your experience:
Make sure the colors you choose for your focus indicator, if at all, are still accessible according to the information documented in the WCAG 2.2 Non-text Contrast (Level AA)
Cognitive overload can cause a user distress. Make sure to keep styles on varying interactive elements consistent
Browser Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome Firefox IE Edge Safari 86 4* No 86 15.4
Mobile / Tablet
Android Chrome Android Firefox Android iOS Safari 123 124 123 15.4
Links
#Accessibility#algorithm#Article#Assistive technology#Branding#browser#Building#buttons#classes#code#collaborate#Color#colors#CSS#data#Design#digitalocean#Disease#eye#focus#form#Forms#how#how to#interaction#it#keyboard#Learn#links#margin
0 notes
Photo
Text color change in JavaScript Get Code from divinectorweb website
#change text color every second#text color change javascript#javascript projects for beginners#javascript projects#HTML#css#html5#css3#learn to code#code#divinectorweb
0 notes
Photo
Multicolored Gradient Text Animation
#multicolored text animation#css text gradient#CSS Text Animation#text animation css#text animation#learn css animation#learn css#css gradient animation#css gradient color animation#code#codenewbies#animation
1 note
·
View note
Video
youtube
HTML Colors | Color Names | Background, Text and Border Color | Color Va...
#youtube#learn html#html#html5 css3#htmldeveloper#html template#html tables#html code#htmlcoding#html css#html colors#learn#learning
0 notes
Text
Neocities Websites for Decor (& Other Resources)
9/4 2:10pm
i've been working on my neocities website and wanted to compile a bunch of places where one can find decor. this is not an extensive list, but rather a bunch of places where you can start finding resources.
please note that various pages could strain the eyes, including flashing lights or colors. pages called 'blinkies' usually have flashing colors throughout. [* = prominent flashing lights]
all websites, resources, and thoughts are beneath the cut
decor
effects for mouse cursors, text, and sites - https://www.mf2fm.com/rv/
assorted decor, images, and more - https://shishka.neocities.org/shishka/toybox
* random gifs from the internet archive - https://gifcities.org
https://pinkukingdom.neocities.org/toybox
http://whimsical.heartette.net/material [has tos you need to follow]
https://cinni.net/?z=/toybox/ [love this website so much]
* assorted early internet graphics - https://www.glitter-graphics.com
https://graphic.neocities.org
https://strawberry-gashes.gensoukai.net/v2/
archived images - https://web.archive.org/web/20100211160439/http://neskaya.net/pixels.php
* https://kawaiiness.net/home.php [potential eye strain]
https://www.asterism-m.com/item/ [japanese site]
https://pixelsafari.neocities.org
https://foollovers.com/mat/index.html [japanese site. has tos]
* https://gothiclolita.neocities.org/materials
https://sozai.pooftie.me [pastels. very low contrast, hard to read warning]
https://scripted.neocities.org
https://arunyi.art/#goodies
https://nonkiru.art/resources
* https://animatedglittergraphics-n-more.tumblr.com / @animatedglittergraphics-n-more
https://drive.google.com/drive/folders/1eQx_UiPvEvI4ZZECoPOuRrLhIE_6XbBy [content guide here... 4k+ gifs and graphics by @topadie]
* https://cutewebgraphics.tumblr.com/directory / @cutewebgraphics
https://pngfarm.tumblr.com / @pngfarm
https://lostsozai.tumblr.com / @lostsozai
decor directories
https://directory.cinni.net/sozai/
https://pixelsafari.neocities.org/links/directory/
https://www.tumblr.com/gender444/680981849679511552/favorite-sozaiblog-materials-sites-fool-lovers
definitions
(for those who don't know and/or are just getting into website creation)
webmaster: person who coded/created the website
favicons: small icons or graphics, usually 16x16 pixels.
pixels: graphics either custom-made or found. i've seen this term used for favicons, adoptables, and other graphics.
emoticons: old term for emojis. typically custom emoji expressions
* blinkies: thin flashing or sparkling banners, usually with text, an image, and flashing lights. collectible.
toybox: collections of favicons, stamps, blinkies, buttons, and more. all up to the webmaster's discretion and preferences
* glitters: glittering or shimmering text or images
stamps: collectible rectangular images, usually 99x56px
buttons: images that are hyperlinked to other websites. often custom-made for one particular webmaster or site.
avatars: typically 100x100 pixel images
other websites
beginner's guide to html and css - https://webguide.neocities.org
dnd style character generator - https://harlekine.neocities.org
templates/themes - https://neothemes.neocities.org
photo editor - https://photomosh.com
rainbow text maker - https://www.glitter-graphics.com/generators/rainbow.php
various other resources - https://scripted.neocities.org
learn more about websites & neocities - https://sadgrl.online
assorted resources - https://www.tumblr.com/punkwasp/725206601551773696/neocitiesindie-webmastery-resources
get started with website creation - https://www.tumblr.com/oddmerit/685644129978499072/note-cause-im-getting-sick-and-tired-of-terfs
all types of resources - https://punkwasp.leprd.space/resources/
* = prominent flashing lights/colors
i suggest not linking back (aka hotlinking) to the resources on the website. instead upload it yourself onto either neocities or an image hosting site and include credit. this way, if the person hosting the image deletes their page or loses the image somehow, your website will still be fine. (i didn't do this and had to find everything all over again... )
i have found that the best websites to use as companions to neocities are w3schools, pinterest, tumblr, and any image hosting site. w3schools for coding tutorials. pinterest for inspiration or for graphics. tumblr for any type of decor and advice. to edit my code and have a live preview, i use codepen.io.
since you read through all this, maybe take a look at my neocities site and follow me! <3
#neocities#html#css#html css#neocity#favicon#web graphics#web design#web decor#pixel art#pixels#banners#webcore#read later#resources#website#carrd resources#indie website#indiedev#webdeveloper#2000s web#old web#geocities#geocity#neopets#neo y2k#y2k aesthetic
1K notes
·
View notes
Note
Do you have any tips on going about making a website for your art/yourself
Think about your site layout Research the website layout you want to fit your art the best first, above anything!
I had to make this seperate blog because my currently portfolio site does not best fit my art needs, but I also can't up and delete it. So now I am paying for 2 seperate websites.
Domain name and coding If you don't already, I recommend learning basic coding (html/CSS) so you can have full control over your site. Squarespace (my portfolio site) is ok but im limited on what I can do with it. Im currently learning how to do HTML myself.
It will cost money on top of paying for the site hosting, but get an official domain for your site. Be sure that this domain name is easy enough to spell and represents you in some way (your name, art subject, etc.
Accessibility Take accessibility into consideration when creating your site. Such as using a max of 3 different fonts, have colors contrast each other, use alt text where you can, and have your font be dyslexic friendly.
The dyslexic friendly font is typically the less aesthetic fonts, but at least your audience will be able to read it lol.
140 notes
·
View notes
Text
Learning Advanced CSS Techniques with WebTutor
In the ever-evolving world of web design, mastering CSS (Cascading Style Sheets) is an absolute necessity to create visually stunning and responsive websites. While most developers are familiar with the basics of CSS, delving into advanced techniques can set you apart as a design maestro. In this blog post, we'll delve into the realm of CSS advanced techniques, exploring how they can transform your web design game. And to help you on your journey to becoming a CSS expert, we'll introduce you to the invaluable resource, Webtutor.dev.
Unleashing the Power of Advanced CSS
Flexbox Mastery: Flexbox is a layout model that can effortlessly handle complex layout structures. With its ability to create responsive grids and alignment control, mastering Flexbox can greatly enhance your design efficiency.
Grid Layouts: CSS Grid Layout unlocks the potential to design intricate layouts with ease. Creating responsive grids that adapt flawlessly to different screen sizes becomes a breeze, allowing for dynamic and engaging web designs.
Custom Animations: Advanced CSS empowers you to create captivating animations without relying on external libraries. From smooth transitions to complex keyframe animations, your designs can come to life in ways you've only imagined.
Responsive Typography: Tailoring typography for various devices is a hallmark of modern design. Learn how to use CSS to create fluid typography that adjusts harmoniously across different screen sizes, enhancing readability and aesthetics.
Transforms and Transitions: Elevate user experience with transformative effects and seamless transitions. Combine 2D and 3D transforms with transitions to build engaging interactions that captivate your audience.
The Benefits of Mastering Advanced CSS
Design Freedom: Advanced CSS techniques provide you with the creative freedom to bring your design visions to reality, without being limited by technical constraints.
Improved Performance: CSS animations and effects can be more performant than JavaScript alternatives, leading to smoother user experiences.
Responsive Design Excellence: With advanced techniques, crafting responsive designs becomes intuitive, ensuring your websites look and function flawlessly on any device.
Efficient Workflow: Streamlined layouts and animations allow for more efficient coding and quicker development cycles.
Professional Growth: As you master advanced CSS, your value as a web designer increases, opening up new opportunities and challenging projects.
Learning Advanced CSS with Webtutor.dev
To embark on your journey towards becoming an advanced CSS designer, Webtutor.dev is your ultimate companion. Their comprehensive Advanced CSS course is designed to guide you through each technique step by step, ensuring you gain practical expertise.
Here's what you can expect from the Webtutor.dev Advanced CSS course
In-Depth Modules: Dive deep into each advanced technique, with clear explanations and hands-on exercises.
Practical Projects: Apply your knowledge through real-world projects that showcase your newfound skills.
Expert Guidance: Benefit from the insights of experienced instructors who are passionate about your growth.
Interactive Learning: Engage in interactive coding sessions that reinforce your understanding and boost your confidence.
Community Support: Join a vibrant community of learners, where you can exchange ideas, seek help, and celebrate your progress.
Conclusion
Elevating your web design game with advanced CSS techniques is a rewarding endeavor that can set you on the path to becoming a design virtuoso. From responsive layouts to captivating animations, mastering these techniques opens doors to limitless creativity. Webtutor.dev offers an unbeatable resource to guide you on this journey, providing a structured and supportive learning environment that empowers you to create stunning, cutting-edge designs.
Visit Webtutor.dev to start your journey into advanced CSS today. Unleash your design potential and create web experiences that leave a lasting impression. Happy designing!
Explore more
From Zero to Hero: How to Create Stunning Websites With CSS for Beginners
The Ultimate Guide to CSS Animations: Engage and Delight Your Audience
Latest CSS Tricks and Features of 2023
Latest CSS Trends in 2023
#Css Tutorials#Learn online CSS#learn the basics of CSS#Basics of CSS Syntax#learn CSS Selectors online#mastering the syntax of CSS#important aspect of CSS#learn CSS colors#online CSS colors#Learn Online CSS#Online CSS Tutorial#Introduction to CSS
0 notes
Text
HELLO
I'M BACK
So much has happened this summer (I finished grad school! I moved halfway across the country!) and I'm trying to get back into a routine that involves having a life again: reading books, watching movies, playing video games, and, of course, drawing and painting again.
I am currently revamping my website. For many years, my website was solely a professional portfolio and shop. White background, simple links, zero personality. Purely a hub to point to my social medias, where all the fun stuff was. I hated going to my own website because it was boring and uninspiring.
Last year, I made a neocities account and learned HTML/CSS for fun. I became obsessed after realizing how much more exciting it is to NOT have a bland, minimalist, corporate-esque website. I love exploring everyone's fun neocities sites, which are nostalgic and truly personalized. It made me hate my old website even more. Then I had a big brain moment: incorporate the fun elements of my neocities site into my website. LOOK AT IT NOW. There is COLOR. Silly fonts. There is a pixelated space background. Tiny gifs sprinkled about!
I will be actually be maintaining my website's blog. That's where the main, long-form content of all my art-making will live. Social media will just get snippets of that content. I do think there is a way to connect Tumblr to my blog so that whatever I post there will be posted here, too, but I haven't tried it yet.
Anyway, Hello Hello Hello Tumblr!
57 notes
·
View notes
Text
I wish when I started learning CSS that someone explained it to me like a paper craft. Before learning CSS I'd never styled a webpage, but you know what I had done?? Scrapbooked with my mom.
If someone had told me that styles on a computer were like a scrapbook page, with layers of transparent and opaque paper, I think it would have been easier to grasp.
Every div or element you style with CSS is a bit of paper, usually transparent, just large enough to fit whatever is going to be pasted on top of it (its content). If you want this piece of paper to look different than the one underneath it, you have to specify how you want it to look different (background color, font etc) otherwise it will inherit from a parent, since it's "see-through". If you want it to be larger than its content, you have to specify. If you want it to be further away from other things, you can place it on a mat (padding) or scoot it away from other stuff (margin) or both.
It's obviously not a perfect analogy but the minute the idea of the cascade crystalized in my mind was the minute I started having a MUCH easier time with CSS. And I think this visual would have helped a lot.
Anyway this is why we need to have more diverse voices in tech or whatever, idk, go style a webpage 💛
14 notes
·
View notes
Text
one of the most important skills continues to be not about being good at what you doin but to be barely servicable about it. jack of a sparse handful of trades, barely scraping mediocre of some etc
i am barely knowledgeable about identifying local plants + animal + fungi but the fact that i can tell any apart has made me hold INFINITE more fondness and appreciation for the world around me. also no living thing likes me i even LOOK at the stray cats in my area and they bolt LMAO <- typing through tears. please keep your cats indoors.
i am inexperienced in so many things and i am getting SO much out of being bad. like i think the wider and thinner i cast my net the more i am getting out of the lived experience
i dont have the a hand or eye for sewing (its debatable how well my hands work LMAO) but i can mend small tears, hem edges, and fix buttons and it is honestly really awesome to look at damage or issues to clothing and know i can fix it later, just dont ask me about darning LOL
i need to stress i know jack about code. i have written one successful random quote generator in javascript with generous help, i have a grasp on HTML and CSS about as secure as a wet bar of soap
BUT im able to actively use inspect element on webpages to change backgrounds and font colors to be friendlier on the eyes for a session ^_^ i made minor adjustments to my desktop theme for the sake of readability! its awesome, i have a flaming trash fire of a personal site (incomplete as hell) i want to add fish to my tumblr blog ^_^
i am DOG in guitar and embroidery and bracelet making and writing and all three other languages i am learning and its AWESOME!!! i love doing a subpar job <3 i love doing things that copy cooler and more experienced artists <3 its so much fun i need to be completely honest. i dont care about being bad. i love being awful and having fun with it <3
#if you take anything away from this#PLEASE try something new#its not enough to not be afraid of being bad#you need to love being bad like a sister#i am oring... tangerin... lemonne... my zest for life...
19 notes
·
View notes
Text
Millenial Art Musing
Gather round, younglings, I’m about to tell a story about ye olde days. *rocker creaks*
My first and most beloved art form, the art that made me who I am, that made me as good as I am at what I do, is dead, is gone, is unreachable.
That might sound dramatic, but I mean that literally. My art form does not, can not, exist anymore. And that's a good thing, because of what it says about accessibility.
I was listening to one of my favourite ever albums when I had this realization today, Johnny Hollow’s 2003 self titled symphonic goth masterpiece. How I found this album was because they had an amazing website. No, really. Amazing. It was a flash masterpiece, where bugs crawled across the screen, different sound clips echoed over different sections, and you unlocked hidden tracks if you answered riddles. It was an artistic triumph. I do believe it won awards.
To modern internet users, that sounds absurd. But I was a web designer back in the days of hard coding, of fixed resolution design, of the surety that everyone was looking at your work from a very similar setup. I got out of web design when it become about scalability, when content management systems were becoming the new norm. Flash hasn’t existed in years, as a design form.
HTML is still the bones of the internet, but it has grown wings and learned to fly. This is good. My art form was not about making things as useable as possible - it was about individual design. Oh what, you have trouble reading 8px Courier in low-contrast color tones? Oh well! It’s art.
The internet should be for everyone, and what I was designing was not that. Yes, it was beautiful, but it was definitely art, not for conveying useful information or accessing tools. Would it be cool if I could make that kind of art again? As pure art? Yes. But there would be no way to make that happen, unless you did something scalable but artistic for the eight million ways people access the internet now. Which is not possible, so maybe if you could control every aspect of the way it was consumed. Which is not possible. Maybe I could do it as an art exhibit, where people came and sat on computers and clicked through incredibly slow pages on 56k to the humming of the computer fan. Ah, the old days.
I am who I am because of my first art. I became a programmer to make Sailor Moon websites, back in the days of Geocities and Angelfire. I learned whole other languages, could speak them fluently, still know common hex codes. (People ask my favorite colour, and I always say French Grey. But really it’s #E6E6E6.)
It is a bizarre and beautiful world to have come from. I miss the camaraderie of the my fellow web designers, those of us trading CSS hacks and joking about the best font style. One person with a credit card who owned a domain and hosted all their buddies, the joy of ridiculous subdomain names.
I am delighted by what the internet has become. But oh, the olden days.
</ramble>
36 notes
·
View notes