#css gradient button

[codenewbies]

CSS Gradient Border Button

[codingflicks]

CSS Gradient Button Animation

[divinector]

CSS Gradient Button Hover Animation

[ao3commentoftheday]

peachy keen ao3 site skin

If you'd like to add this site skin to your AO3 account, the code is under the cut.

Colours Used: pale peach: #ffeae4 darker peach: #f3c6ba yellow: #ffd7a8 orange: #ff9b75 reddish orange: #f44336 darkest orange: #8E0505

CSS:

#outer {   background: linear-gradient(90deg, rgba(255,155,117,.9) 0%, rgba(255,215,168,1) 100%); }

#header .primary {   background: #ff9b75;   background-repeat: repeat;   box-shadow: none; }

#search .button, #header .logo {   display: none; }

#header .heading a, #greeting img.icon {   visibility: hidden; }

#header #search .text {   background: #ffeae4;   border: none;   box-shadow: none;   width: 7em; }

#header h1.heading a::before {   content: " 🍑🍑🍑";   visibility: visible; }

.splash .module h3 {   border-bottom: none;   color: #f44336; }

#header .menu, #small_login {   background: #ffeae4;   box-shadow: none;   width: 20em; }

#greeting .user > li a {   color: #8E0505; }

#header .menu li, .splash .news li {   border-bottom: none; }

#header .actions a:hover, #header .dropdown:hover a.dropdown-toggle, #header .menu li a {   background: none;   color: #f44336 !important; }

#footer {   background: #ff9b75; }

#main {   color: #8E0505; }

#main a {   color: #f44336; }

.splash .favorite li:nth-of-type(2n+1) a {   background: #ffeae4;   border: 1px solid #ffeae4;   border-radius: 5px; }

.splash .favorite li:nth-of-type(2n+1) a:hover, .splash .favorite li:nth-of-type(2n+2) a:hover {   background: #f44336;   border: 1px solid #f44336;   border-radius: 5px;   color: #fff !important; }

.resp-sharing-button--twitter, a.resp-sharing-button__link {   color: #fff !important; }

.listbox, fieldset, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, .dynamic form {   background: url("https://image.freepik.com/free-vector/vector-seamless-pattern-with-peaches_1015-1760.jpg");   background-repeat: repeat;   border: 4px solid #fff;   box-shadow: none; }

form dl {   background: #ffeae4;   border: 2px solid #fff;   box-shadow: none; }

input, textarea {   border: 1px solid #f44336;   box-shadow: none; }

input:focus, select:focus, textarea:focus {   background: #ffeae4; }

form dt {   border-bottom: 1px solid #fff; }

form dd.required {   color: #8E0505; }

.LV_invalid {   background: #ffd7a8;   border: 1px solid #fff;   color: #f44336;   box-shadow: none; }

.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active {   border: 1px solid #8E0505; }

.autocomplete div.dropdown ul {   background: #fff;   border: 1px solid #f44336;   color: #f44336;   box-shadow: none; }

.autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected {   background: #f44336;   color: #fff; }

.required .autocomplete, .autocomplete .notice {   color: #f44336; }

.ui-sortable li {   background: #ffd7a8;   border: 2px solid #fff;   box-shadow: none; }

.ui-sortable li:hover {   background: #ff9b75;   border: 2px solid #fff;   box-shadow: none; }

.ui-draggable form {   box-shadow: none; }

.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash, muted.notice, form.verbose legend, .verbose form legend, span.question, span.symbol, select {   background: #ffeae4;   color: #f44336;   border: 2px solid #f44336;   box-shadow: none !important; }

#modal {   background: #ffeae4;   border: 4px solid #ff9b75;   box-shadow: none; }

#modal .content {   border-bottom: none; }

.actions a:visited, .action:visited, .action a:link, .action a:visited {   color: #f3c6ba; }

.actions a:hover, .actions input:hover, .actions a:focus, .actions input:focus, label.action:hover, .action:hover, .action:focus {   color: #f44336;   border-top: none;   border-left: none;   box-shadow: none;   background: #f3c6ba; }

.actions a:active, .current, a.current, a:link.current, .current a:visited {   color: #fff;   background: #ff9b75;   border-color: #fff;   box-shadow: none; }

.actions label.disabled {   background: #ff9b75; }

.actions .disabled select {   color: #fff;   border-color: #fff; }

.delete a, span.delete {   color: #f44336;   box-shadow: none; }

.secondary {   background: #fff;   border: 2px solid #f44336;   box-shadow: none; }

.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed {   background: #ffeae4 !important; }

.draft {   border: 2px dashed #ff9b75; }

span.unread, .replied, span.claimed, .actions span.defaulted {   background: #f3c6ba;   color: #f44336;   border: 1px solid #fff;   border-bottom: none; }

.actions span.defaulted {   color: #8E0505; }

.draggable, .droppable, span.requested, .nominations .rejected {   color: #8E0505; }

.nominations .approved {   background: #ffeae4; }

.nominations .rejected {   background: #f3c6ba; }

span.offered.requested {   color: #ffeae4; }

.wrapper {   box-shadow: none; }

dl.index dd {   background: #f3c6ba; }

p.kudos {   background: url("https://64.media.tumblr.com/14dd2ee05dbcc111dab41d6206985fe8/b1eb33fb168e0088-4b/s1280x1920/8fabca965895c42bae4d746506ffc96324eb2fd5.png");   background-repeat: no-repeat; }

.statistics .index li:nth-of-type(even) {   background: #f3c6ba; }

fieldset fieldset.listbox {   background: #ffeae4;   border: 2px solid #ff9b75;   box-shadow: none; }

.listbox>.heading, .listbox .heading a:visited {   color: #f44336; }

.listbox .index {   background: #ffeae4;   box-shadow: none; }

dl.meta {   border: 2px solid #f44336;   background: #ffeae4; }

.actions a, .actions a, .action, input[type="submit"], button, .actions label, .actions a, .actions a:link, .action, .action:link, .actions input, input[type=submit], button, .actions label {   background: #ffeae4;   border: 1px solid #f44336;   text-shadow: none;   color: #f44336; }

.current, #dashboard .current {   background: #f44336;   border: 1px solid #fff;   text-shadow: none;   color: #fff; }

#dashboard.own {   border-top: none;   border-bottom: none; }

#dashboard a {   color: #f44336 !important; }

#dashboard a:hover {   background: #ff9b75; }

label {   color: #f44336; }

li.blurb, fieldset ul {   background: #ffeae4 !important;   border: 2px solid #fff; }

#header h2.collections, .reading h4.viewed, dl.index {   background: #ffeae4;   color: #f44336; }

.comment h4.byline {   background: #f3c6ba;   border-bottom: 2px solid #fff; }

.comment div.icon {   border-bottom: 5px solid #ff9b75; }

li.comment {   border: 2px solid #fff;   background: #f3c6ba; }

li.comment ul.actions {   background: transparent !important;   border: none !important; }

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect, #stat_chart svg g:nth-of-type(2) > g rect:last-of-type, #stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:first-of-type {   opacity: 50% !important; }

h5.fandoms.heading a, .fandom .tag, .work .fandom a.tag {   font-variant: small-caps; }

.warnings .tag, .work .warning a.tag {   background: #8E0505;   border: 1px solid #8E0505;   border-radius: 5px;   color: #fff !important;   padding-left: .5em;   padding-right: .5em; }

.relationships .tag, .work .relationships a.tag {   background: #f44336;   border: 1px solid #f44336;   border-radius: 5px;   color: #fff !important;   font-weight: bold;   padding-left: .5em;   padding-right: .5em; }

.characters .tag, .work .characters a.tag {   background: #ff9b75;   border: 1px solid #ff9b75;   border-radius: 5px;   color: #fff !important;   font-weight: bold;   padding-left: .5em;   padding-right: .5em; }

.freeforms .tag, .work .freeforms a.tag {   color: #f44336 !important; }

.commas li:after {   content: none; }

ul.tags {   line-height: 190%; }

[sesamestreetkid]

!!! my tag system is below all of this,,, I moved it under a cut because people reblog this post for the links :P

edit: thx for the love on this post. im going to try and continually update this!

⇩ ⠀sites FULL of web graphics ⇩

blinkie maker : make your own blinkies!

DOLLZ REVIVAL : a revival of pixel dolls where you can create and share your own. very cute!

GlowTxt : create glowing transparent text gifs that say whatever u want

HOARDER'S PILE : contains blinkies, buttons, stamps, and teddies

plasticdino.neocities.org : blinkies

Glitter Graphics : contains gifs, blinkies, dividers, and just sooo many web graphics

Cute Kawaii Resources : contains gifs, blinkies, stamps, favicons, dividers, buttons, fonts, literally everything you need. its an insane resource

Adrian's blinkie collection : collection of blinkies, stamps, and buttons

☆ (supplies.ju.mp) : blinkies, stamps, buttons, & favicons

twigbranch.carrd.co : blinkies

lallys.carrd.co : blinkies, stamps, dividers, and other resources

Bugleeblinkie.carrd.co : blinkies, and 3 very special gifs at the end ;)

unshinesblinkies.carrd.co : blinkies

The 88x31 GIF Collection : buttons. there are 5 parts! huge collection!

Bonnibel's Graphic Collection : blinkies

WELCOME TO GIFCITY : blinkies, dividers, favicons, stamps

cass-tastrophe.carrd.co : blinkies, stamps

kotatsuOS : blinkies

Cute web graphics : blinkies, stamps, dividers, and a LOT of other graphics, all very cute

⇩ some html tools! + tags below cut ⇩

MDN (mozilla.org) : if you're just starting out like me this is super helpful HTML Tutorial (w3schools.com): same here! (offers other programming languages as well!) Accessibility Checker(Free Scan) : a site you can use to check accessibility/ADA compliance when making your website! it will point out what needs to be changed. it is free, but they also offer paid services if you need more help imagecolorpicker.com : hex code picker. i use this one because you can upload an image, paste clipboard, OR type in the website and it'll grab a screenshot for you! something simple that was made really well. cssgradient.io : helps you make css gradients for backgrounds or whatever else you need them for smartgb.com : a free guestbook service FC2 Counter! : free "site visits" and "online now" counters. fully customizable Unclosed Tag Checker by Alicia Ramirez : does as it says, checks for unclosed tags (although I recommend using a program that does this as you write anyways. I use Visual Studio Code. Status Cafe : an updateable and embeddable status that you can stick anywhere on your site! it is mostly customizable with CSS but I have noticed a few small quirks with it

my tagging system :))

#graphics

#blinkies

#stamps

#buttons

#dividers

#html/css

#resources

#code

e10's web (neocities.org) <- shameless site plug. show it some love :P

[skittlespizza]

hey my bro (mutual) how did you . learn html . like is there a specific guide that helped the most or was it just whatever you could find

HAII OKAY SO these are all my useful site links but sadgrl.online & eggramen.neocities.org will be your best friend!!! Eggramen has a shit ton of templates to choose from & sadgrl.online has a bunch of really useful tutorials!

^ SUPER USEFUL FOR CSS!!! This makes a lot of your css code automatic.

Live coding of html css, i always use this thang...

Also just googling "how to ____ html css" is VERY useful lol. So eggramen and sadgrl to start... LET ME KNOW IF YOU HAVE SPECIFIC QUESTIONS!!! i can also share some of my code if you'd like!!!

[enby-ralsei]

I know there has been a lot of stuff that has happened recently related to NSFW JRWI stuff. It's not like it's gonna go away, so I'm gonna offer a solution if you don't wanna see NSFW fics. No need to filter before, just go straight into the JRWI AO3 tag and they won't be there.

This uses something called a site skin. This is a feature on AO3 that allows you to change the look of the website (specifically the CSS). You can add backgrounds, change colors, and a whole ton of stuff, including being able to filter fics so you don't have to see them without even using the filter menu.

Steps to complete this under cut!

1) You are going to go to your user dashboard. Just click on Hi, [Username] and you will see dashboard pop up.

2) You will see a button on the side (desktop) or on top (mobile) that says skins. Click this.

3) Click the button that says Create Site Skin.

4) Title this skin whatever you want. No one else is going to be able to see it. A description if you feel so inclined.

5) Add this exact code to the CSS box. Just copy and paste as seen here.

.blurb:has(a[href*="/tags/Just%20Roll%20With%20It%20(Podcast)/works"]):has(span.rating-explicit) { display: none !important; }

6) Click submit. This is your site skin.

7) Hit use.

And all of the explicit JRWI fics should be filtered out. This will not filter explicit fics in any other fandom. If you want that, just get rid of the first ":has" statement and keep the second. I am not a coding wizard, so I'm not sure how much help I will be with troubleshooting, but here are some things to check if it doesn't work.

Does your browser have ":has" CSS compatibility? Check on this website (click here)

This is another way to see if ":has" works in your browser. Warning for eyestrain, this yellow is extremely bright. You will know if this works.

.blurb:has(a) { background: yellow; }

Beyond that, I do not know why it wouldn't work. I have heard that on mobile, if you use Firefox as your browser, it has to be Firefox Nightly because it allows for more developer coding nonsense.

This is the source I used to figure all of this out (click here)! If you need help troubleshooting, look here. It's your best shot. It took me far longer than it should have to figure out how to code this one thing (Thank you JRWI fandom tag for having parentheses, you made this much harder than it had to be /lh)

For getting this far, have a fun piece of code that makes the background of fic blurbs with Jay Ferin have a bisexual gradient.

.blurb:has(a[href*="Jay%20Ferin"]) { background: linear-gradient(135deg, rgb(199, 199, 255), rgb(240, 160, 210)); }

[your-average-art-dealer]

Macaque Site Skin Thing (yippee!)

────────────────────────────────────────────

Notes:

The CSS is mostly mishmashed from other codes and therefore is not perfect, there a places where the site retains its white accents or boxes and can be quite jarring when scrolling in a dark purple background to then suddenly be met with splashes of bright white

I personally wouldn't read works with this, it's mostly for the aesthetic and was not made with comfortable reading in mind (oof)

Wizard Settings/Code Stuff is REQUIRED alongside the CSS because without it the skin looks... kind awful.

────────────────────────────────────────────

CSS:

p.kudos { background: url("https://i.imgur.com/JmZWnGX.png"); background-repeat: no-repeat; }

.listbox, fieldset, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, .dynamic form { background: url("https://i.imgur.com/xoHN0lj.jpeg"); background-repeat: repeat; border: 4px solid #fff; box-shadow: none; }

header h1.heading a::before {

content: url("https://i.imgur.com/9NaliS0.png"); visibility: visible; }

search .button,

header .logo {

display: none; }

header .heading a,

greeting img.icon {

visibility: hidden; }

outer {

background: linear-gradient(90deg, rgba(24, 12, 41,.9) 0%, rgba(16, 7, 28,1) 100%); }

header h1 sup,

header .button,

header .landmark,

header .logo {

display: none; }

inner.wrapper {

margin: 0em 4%; }

header .heading {

height: 20em; }

header {

background-color: #ffffff; background-image: url("https://i.imgur.com/1jqr3CI.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; border-bottom: 2px solid #fff; }

header .heading a {

color: #fff; padding-left: 0em; }

header .primary {

background: none; box-shadow: none; }

greeting {

background: none; margin-right: 0em; position: absolute; right: 0em; top: 0em; }

header .primary li:not(.search),

header .primary li a,

greeting li,

greeting li a {

color: #FFF !important; background: #850900; border-top-left-radius: 2%; }

header .primary li:not(.search),

greeting li {

border: 1px solid #372457; }

.warnings .tag, .work .warning a.tag { background: #06000f; border: 1px solid #06000f; border-radius: 5px; color: #dbc2ed !important; padding-left: .5em; padding-right: .5em; }

.relationships .tag, .work .relationships a.tag { background: #0b0121; border: 1px solid #0b0121; border-radius: 5px; color: #dbc2ed !important; font-weight: bold; padding-left: .5em; padding-right: .5em; }

.characters .tag, .work .characters a.tag { background: #220c4a; border: 1px solid #220c4a; border-radius: 5px; color: #dbc2ed !important; font-weight: bold; padding-left: .5em; padding-right: .5em; }

────────────────────────────────────────────

Wizard Stuff:

────────────────────────────────────────────

[loressa]

Been working on UI as I update Earthsong, my jam entry from my favorite game jam, Regenerate!

Here's what the page first looked like:

Here is where I'm at now:

I'll make more tweaks before I'm done (the scrollbar overflow in particular!), but I'm really happy with the progress and my improvement at CSS!

Colors will be able to be changed for accessibility.

Edit: after a bit more tinkering:

Edit: I've discovered flex: 1 - see bottom bar buttons!

Edit: I adore this scrollbar. Just need to figure out how to make it not overlap. But I am in love with the color gradient, keep sitting during debugging just scrolling up and down lol

[testrigtechnologies]

What Is Cross-Browser Testing? A Complete Guide for Seamless Web Experiences

In today’s fast-evolving digital landscape, users access websites from a wide array of devices, operating systems, and browsers. From Chrome and Firefox to Safari and Edge—each browser interprets your website code slightly differently. This is where Cross Browser Testing becomes essential.

This blog dives deep into what cross browser testing is, why it matters, what features it covers, and how to do it effectively—ensuring your website delivers a consistent, bug-free experience across all platforms.

What is Cross Browser Testing?

Cross Browser Testing is a type of non-functional testing that verifies whether a web application functions and appears correctly across different web browsers, browser versions, and devices.

It helps developers and QA engineers ensure that:

The UI renders consistently

Core functionalities work correctly

There are no browser-specific bugs or issues

Cross browser testing is not just about aesthetics—it’s about ensuring usability, performance, and accessibility for all users, regardless of how they access your website.

Why is Cross Browser Testing Important?

If you’re only testing your website on Chrome, you’re missing the bigger picture.

Here’s why cross browser testing is crucial:

1. Diverse User Base

Your users might be on Chrome, Safari, Firefox, Edge, or Opera, and using different devices like desktops, tablets, or smartphones. Testing across these ensures everyone has a uniform experience.

2. Browser Rendering Engines Differ

Browsers like Chrome (Blink), Safari (WebKit), and Firefox (Gecko) interpret HTML, CSS, and JavaScript differently. Even a small deviation in rendering can lead to layout breakages or functionality issues.

3. Prevent Loss of Traffic and Conversions

A buggy checkout page on Safari or broken navigation on Firefox can significantly hurt conversion rates and user trust.

4. SEO and Accessibility

Search engines value user experience. Broken layouts or slow load times on certain browsers can negatively affect SEO performance and bounce rates.

What Features are Analyzed in a Cross Browser Test?

Here are the key features and areas evaluated during cross browser testing:

✅ 1. Layout and Design Consistency

CSS rendering

Font sizes, spacing, padding

Media queries and responsiveness

Grid and flex layouts

✅ 2. JavaScript Functionality

Form validation

Dynamic content rendering (DOM updates)

Event handling

Navigation toggles

✅ 3. HTML5 and CSS3 Compatibility

Audio/video elements

Animations

Flexbox, grid, shadows, gradients

✅ 4. Third-Party Integrations

Plugins (chatbots, tracking tools)

Embedded maps or videos

Social sharing buttons

✅ 5. Performance and Speed

Load times across browsers

JavaScript execution speed

Rendering behavior

✅ 6. Security and Cookie Behavior

HTTPS redirection

Local storage and session cookies handling

How is Cross Browser Testing Done?

Cross browser testing can be performed manually or via automation tools. Here's a step-by-step guide:

Step 1: Define Your Browser Coverage

Choose browsers based on:

Your website’s Google Analytics browser report

Global browser usage statistics

Market demographics (e.g., Safari for iOS users)

Example Browser Matrix:

Read also: How Playwright Enhances Cross-Browser Testing Efficiency

Step 2: Set Up Your Test Environment

You can use:

Real Devices: For high accuracy

Emulators/Simulators: Quick tests for layout

Cloud Testing Platforms like:

BrowserStack

Sauce Labs

LambdaTest

CrossBrowserTesting.com

Step 3: Run Tests (Manual or Automated)

🔹 Manual Testing

Test scenarios using real devices and browsers, inspecting UI and performing tasks manually.

🔹 Automated Testing

Use frameworks like:

Selenium

Playwright

Cypress

TestCafe

Automation helps:

Reduce testing time

Run tests in parallel

Integrate with CI/CD pipelines

Step 4: Log and Fix Issues

Document browser-specific bugs, prioritize them, and retest after fixes.

Step 5: Continuous Cross Browser Testing

Use CI tools (Jenkins, GitHub Actions, GitLab CI) to schedule tests automatically on every build or code change.

Best Practices for Cross Browser Testing

✅ Always test on real user data (Google Analytics insights)

✅ Prioritize critical user flows first

✅ Automate repetitive tests, but don’t skip manual exploratory testing

✅ Regularly update browser versions in your testing matrix

✅ Perform regression testing after any major frontend update

Conclusion

Cross Browser Testing is not optional—it’s a necessity in today’s fragmented web ecosystem. Ensuring that your application works flawlessly across all major browsers not only boosts user experience and trust but also strengthens your brand’s credibility

As a leading Web application testing company, at Testrig Technologies, we specialize in comprehensive Cross Browser Testing Services that guarantee flawless digital experiences on any browser, device, or OS. Whether you're launching a new site or scaling an existing one, our QA experts are here to help.

[lord-html]

Menu: Danceballs

Bem, achei esse menu bem fofo no bloggertrix, fiz algumas alterações e encurtei os códigos e estou aqui repassando à vocês :3

Live preview.

Para começar, copie o código abaixo e cole em seu css.

.button a{ font:15px Calibri, Arial, sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; text-transform:uppercase; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'); background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s; } .button a:hover{background-position:top left;background-position:top left, bottom right, 0 0, 0 0;} .button a:active{bottom:-1px;} .button.small a{ font-size:10px;} .gray.button a{ color:#525252 !important; border:1px solid #a5a5a5 !important; background-color: #a9adb1; background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c); background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); } .gray.button a:hover{ background-color:#b6bbc0; background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9); background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }

Bem, façam suas modificações como quiserem… e depois colem o código abaixo onde querem que o menu apareça.

<div class="button small gray"> <a href="#">Link</a> <a href="#">Link</a> </div>

Então é isso, espero que tenham gostado… Beijos

[codingflicks]

CSS Glowing Button

[amphibianauthor]

Ao3 HTML/Coding References-Part I

I recently made a code-heavy choose your own adventure fic, and I wanted to compile all of the really helpful resources I've found along the way. Basics, Text altering and Fancy Formatting (adding dividers, columns, photos, videos, tabs etc.) is below!

(Note: I've had to split this in two, so see Part II for all the website mimic HTML)

Basics:

This Ao3 Posting Doc converts Google doc into HTML, adding bold, underline, italics, strikethrough, paragraph breaks, and centered text. Major game changer for heavy HTML works

The Fic Writer's Guide to Formatting by AnisaAnisa: This is a masterpost in itself, covering links, images, boxes, borders, fonts etc. So I'm putting it here since it's amazingly helpful

HTML References by W3 schools- I've linked the HTML colors here, but this is a platform designed to help people learn/reference HTML

Ao3's own guide to HTML on their site Lovely Q&A for Ao3 specific HTML questions

A Guide to Ao3 HTML by Anima Nightmate (faithhope) This walks through what HTML code means SO WELL!

Text resources: (altering the color, font, emoji, style etc.)

Font's chapter: The Fic Writer's Guide to Formatting: okay I know I already linked it above, but listen it's very good so I'm linking again

Fonts colors and work skins oh my by Charles_Rockafeller takes fonts to a different level.

Multicolored text skin by ElectricAlice GRADIENT TEXT

All the Emoji by CodenameCarrot while Ao3 has signifigantly improved on hosting emojis, this code helps with using some more unconventional emojis. Amazing resource.

Upsidedown text and Zalgo text generators - these specific text generators allow for you to see their direct HTML codes

Fun CSS Text Effects by DoctorDizzyspinner

Workskin for showing and hiding spoilers by ElectricAlice makes text appear when hovered/clicked. Amazing for Trigger Warnings

Make text appear when you click [Work skin] by Khashana clickable end notes buttons for your work, similar to the spoiler button text

Hide spoilers like Discord by Professor_Rye

Desktop/mobile friendly short tooltips workskin by Simbaline

How to make Linked Footnotes on Ao3 by La_Temperanza

User-selectable Names in a Fanfic work by fiend Ever want people to select between different names in a fanfic? I could also see this used as ability to switch gender in a fanfic.

AO3 Comic Text Effects using CSS by DemigodofAgni Ever want a giant comicbook POW in your fic?

How to override the Archive's Chapter Headers by C Ryan Smith

Collection: CSS Guides by Goddess_of_the_arena (many helpful text walkthrough resources)

Fancy Formatting {Note: this got long so I split it up into more manageable sections}

Coding Masterpieces (Multiple things within the same fic)

Personal Experiment with HTML and CSS by MohnblumenKind This has a variety of help, Chapter 6 & 7 were great for choose your own adventure, Chapter 4 talks about columns and skins, and Chapter 10 even has a newspaper made entirely from site code.

Repository by gaudersan google searches, ao3 stats, instagram and text messages galore

CSS in Testing/Bleed Gold by InfinitysWraith Masterclass in cool formatting, including overidding default headers, Doors opening animation, Grid interactive photos, Hovering to change a photo, Retroactive text etc.

CSS in Testing:Second in Series by InfinitysWraith: Interactive keypads, Mock news site and interactive locking mechanism.

Coding Encyclopedia by Anonymous: chess, opening html envelopes, functioning clocks, HTML Art– this book is genuinely the most advanced stuff I’ve seen with HTML code on Ao3– and I’ve looked at every guide on this list.

Decorations (Boxes, Dividers, letters/background)

How to mimic letters, fliers and stationary without using images by La_Temperanza Really helped with box formatting

Decorations for Fic (HTML/CSS): Fanart, Dividers, Embedded Songs and More by Jnsn this has SO MANY cool coding features, including a chessboard that moves when you hover over it

Build a divider tool demo by skinforthesoul

How to make custom Page Dividers by La_Temperanza

Found Document work skin by hangingfire

Embedding other formats: (Images, gifs, youtube videos, audio, alt text)

Embed that Audio by Azdaema 

Newbies guide to Podficcing by Azdaema

Embedding youtube videos on ao3 to scale with the screen by pigalle add youtube videos mid fic

Conlangs and Accessibility by Addleton this fic instructs how to have accessible translations in fic

How to make Images Fit on Mobile Browsers by La_Temperanza great image adding code

How to Wrap text around images by La_Temperanza image text wrapping

How to put pictures and gifs on Ao3 from Google Drive by gally_hin

Choose Your Own Adventure Code

How to make a Choose Your Own Adventure Fic by La_Temperanza allows for clickable links and hidden text.

Interactive fiction Workskin Tutorial by RedstoneBug BEST CHOOSE YOUR OWN ADVENTURE RESOURCE

How to make your fic look like the game by MelsShenanigans, ThoughtsCascade (I was a Teenage Exocolonist is the game but it’s a Choose your own adventure re-skin)

Newspaper/Article/Blog mimic

How to make a News Website Article Skin on Ao3 by ElectricAlice

Newspaper/Magazine Article Template by deathbymistletoe

Newspaper Article by lordvoldemortsskin --basic but adaptive for mobile

Newspaper Article Adaptation by KorruptBrekker modification for different columns

TMZ WorkSkin by Anonymous

Basic blogpost skin by Anonymous

Blog Post Work Skin by Anonymous

Journaling App by egnimalea

Email Mimic

How to insert Gmail emails in your fic by DemigodofAgni

How to mimic Email Windows by La_Temperanza

Gmail Email Skin by Sunsetcurbed

The idiot’s incoherent guide for learning css & html for ao3 in dystopia by anonymous (Gmail skin) 

Search Engine Mimic

Google Search Suggestions Work Skin and Tutorial by Bookkeep

Baidu Search History Work Skin by Bookkeep

Repository by gaudersan 

Misc. General formats with HTML (mission reports, spreadsheets, other documents)

Screenplay skin by astronought

Screenplay workskin by legonerd

Mock Spotify Playlist WorkSkin by Anonymous

How to make a rounded playlist by La_Temperanza Ever want to show a character's music playlist within your fic

Workskin for in Universe Investigative/Mission Report with Redaction by wafflelate case files/CSI reports

Learn to Microsoft Excel by ssc_lmth insert a spreadsheet in your fic

Ao3 Work skin: a simple scoreboard by revanchist shows how to code a scoreboard

Colossal Cave Adventure by gifbot Working Keyboard anyone?

Tabbing experiment by gifbot (clickable tabs)

Bonus: Ever wanted to see how crazy HTML can be on AO3? Try playing But can it run Doom? or Tropémon by gifbot

Happy Creating!

Last updated: Dec 28 2024 (Have a resource that you want to share? My inbox is open!)

See Part II for Website Mimics here!!

[notioncolors]

Understanding the Science of Gradients with a Gradient Color Generator

Introduction: The Visual Allure of Gradients

Gradients have become a cornerstone of modern design, effortlessly blending colors to create depth, movement, and emotion. Whether it’s the glowing hues in a mobile app interface or the soft transitions on a website background, gradients captivate audiences with their versatility. But what makes them so impactful? The answer lies in the psychology of colors and the science of their transitions.

In this blog, we’ll explore the emotional power of gradients, delve into their types—linear, radial, and angular—and reveal how tools like Gradient Color Generators bring these visual elements to life. Plus, we’ll look at real-world examples of successful brands leveraging gradients for a competitive edge.

The Psychology of Color: How Gradients Influence Emotions

Colors are more than just visual stimuli; they evoke feelings and shape perceptions. Gradients take this a step further by blending colors to create a spectrum of emotions.

Warm Gradients: Think of fiery oranges blending into deep reds. These gradients evoke energy, passion, and urgency. They’re often used in call-to-action buttons or promotional banners.

Cool Gradients: A smooth transition from aqua blue to emerald green offers calmness and serenity, ideal for wellness and nature-focused designs.

Multicolored Gradients: Combining multiple hues, like purples and yellows, creates a sense of playfulness and creativity, perfect for tech startups or entertainment platforms.

By leveraging a Gradient Color Generator, designers can experiment with these combinations, crafting transitions that evoke the desired emotional response.

Understanding Gradient Types

Gradients can take on different forms, each offering unique design possibilities. Let’s break down the three most common types:

1. Linear Gradients

Linear gradients create a smooth color transition along a straight line. Designers can specify the angle, direction, and range of colors to achieve various effects.

Applications:

Website headers for a sleek, modern look.

Call-to-action buttons to grab attention.

Dynamic text effects to make headlines pop.

Example:

A linear gradient transitioning from vibrant pink to purple creates a futuristic vibe, perfect for tech brands.

2. Radial Gradients

Radial gradients radiate outward from a central point, creating a circular color transition. They’re ideal for adding depth and focus to a design.

Applications:

Backgrounds that draw attention to the center of the page.

Logos or icons with a spotlight effect.

Abstract art pieces that exude creativity.

Example:

A soft radial gradient transitioning from light blue to white mimics the sky, offering tranquility and openness.

3. Angular Gradients

Angular gradients rotate colors around a central point, creating a pie-chart-like effect. While less common, they offer a bold and dynamic design option.

Applications:

Abstract patterns for eye-catching visuals.

Branding elements that convey energy and movement.

Backgrounds for tech or gaming platforms.

Example:

An angular gradient rotating through the rainbow spectrum creates a vibrant, energetic feel for a music app.

How Gradient Color Generators Work

Gradient Color Generators are powerful tools that simplify the process of creating visually stunning gradients. Here’s how they work:

1. User-Friendly Interface

Most tools offer an intuitive drag-and-drop interface. Designers can choose starting and ending colors, adjust angles, and preview changes in real-time.

2. Algorithmic Precision

Behind the scenes, these tools use algorithms to calculate the smoothest transitions between colors. They ensure that the gradient looks harmonious without harsh breaks or clashing tones.

3. Customization Options

From opacity adjustments to multi-color gradients, these tools provide endless possibilities. Some even allow exporting code snippets (e.g., CSS) for seamless integration into web projects.

Popular Tools to Explore

CSS Gradient: Ideal for developers, offering both visual and code outputs.

UI Gradient: A curated collection of gradient presets for inspiration.

Coolors: Perfect for generating unique gradient palettes with ease.

Case Studies: Brands That Nailed Gradients

Instagram: A Gradient Revolution

Instagram’s iconic gradient logo—transitioning from pink to orange—has become synonymous with the brand’s vibrant and creative community. It conveys warmth, creativity, and inclusivity, setting the platform apart from its competitors.

Spotify: Bold and Dynamic

Spotify often uses gradients in its playlist covers, combining bold colors like neon green and purple. This approach communicates energy and modernity, aligning with the brand’s youthful target audience.

Apple: Subtle Elegance

Apple’s use of gradients is minimalistic yet impactful, often featuring subtle transitions in product images and advertisements. These gradients enhance the sense of depth and premium quality associated with the brand.

Practical Tips for Using Gradients

Start with Two Colors: Simplicity is key. Begin with two complementary colors and experiment with their transitions.

Consider Context: Match the gradient’s tone with your project’s purpose. Warm gradients suit energetic campaigns, while cool ones are ideal for calming designs.

Play with Opacity: Adding transparency can create layers and depth in your design.

Use Contrast Wisely: Ensure sufficient contrast between text and background gradients to maintain readability.

Test Across Devices: Gradients can appear differently on screens. Use tools to preview how they’ll look on various devices.

The Future of Gradients in Design

As design trends evolve, gradients continue to thrive, driven by advancements in technology and user expectations for visually engaging experiences. From 3D gradients to dynamic, animated transitions, the possibilities are limitless.

Gradient Color Generators will play a crucial role in this evolution, empowering designers to push creative boundaries with minimal effort.

Conclusion: Experiment with the Science of Gradients

Gradients are more than a visual trend—they’re a powerful design element rooted in color psychology and science. Whether you’re crafting a bold brand identity or enhancing a website’s appeal, gradients offer endless possibilities.

Ready to experiment with gradients? Try a Gradient Color Generator today and unlock the potential of seamless color transitions in your designs.

[helloomaruf]

Gradient Button in ClickFunnels Made EASY With This One CSS Trick 🔥

We can change the Background Color of ClickFunnels Sales Page buttons by using this Simple CSS Trick to set the Gradient Color.

📽 Watch Video - https://youtu.be/Je3zvZgXOmc

#css #tricks #clickfunnels 🔥

[venusandjuno]

<!-------MUSIC PLAYER BY GLENTHEMES------->

<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<style type="text/css">

/*-------MUSIC PLAYER BY GLENTHEMES-------*/

#glenplayer02 {

position:relative;#container02;

bottom:0;

margin-bottom:0;

left:0;

margin-left:0;

display:flex;

z-index:99;

}

#glenplayer02 a {

text-decoration:none;

}

#glenplayer02 > div {

align-self:center;

-webkit-align-self:center;

}

.music-controls {

user-select:none;

-webkit-user-select:none;

width:25px;

font-size:20px;

cursor:pointer;

}

.playy, .pausee {

background: radial-gradient(circle, rgba(255,129,184,1) 0%, rgba(137,191,255,1) 100%);

-webkit-background-clip: text;

-webkit-text-fill-color:#FFFFC7A1;

-webkit-text-stroke-width: 0.4px;

-webkit-text-stroke-color: #ff2f8a;

-webkit-filter: drop-shadow(0px 0px 2px #fff);

} /* color of play & pause buttons */

.pausee {

display:none;

}

.sonata {

margin-left:3px;

margin-bottom:0;

color:#222; /* color of music note symbol */

}

.label text {

margin-bottom:0;

margin-left:0px;

font-family:courier new;

font-size:9px;

color:#222; /* color of song title */

}

</style>

<body>

<!-------MUSIC PLAYER BY GLENTHEMES------->

<div id="glenplayer02">

<div class="music-controls" onclick="songstart();">

<div class="playy">►</div>

<div class="pausee">❚❚</div>

</div>

<div class="sonata"></div>

<div class="labeltext"><img src="https://64.media.tumblr.com/0e377b53af377447f9b145b1fdcd8d4d/1cec31ea271359b0-d5/s75x75_c1/eedee452b4c4bf95c6b6ce67231db672f1436932.gifv"></div>

</div><!--end music player-->

<audio id="tune" src="https://dl.dropbox.com/scl/fi/swznmgg4dgvspnr5qt8cz/supernova-love-slowed.mp3?rlkey=kt9lwntaquvnz0io85gzazl01&st=6oxy14ea&dl=0"></audio>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>