Тёмный

Glowing Cursor Card Effect - Bricks Builder Tutorial 

Nicholas Arce
Подписаться 2,1 тыс.
Просмотров 7 тыс.
50% 1

Опубликовано:

 

27 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 75   
@potti-webdesign7623
@potti-webdesign7623 8 месяцев назад
Hyperplexed to Bricks Tutorials - a dream came true 😍
@nickarceco
@nickarceco 8 месяцев назад
😉
@matthollub4977
@matthollub4977 4 месяца назад
I'm truly blown away every day with what people can do with Bricks. Cheers man!
@derekshort
@derekshort 2 месяца назад
I love both designs! 1. The glowing border 2. The glowing background
@Joe-ss9cr
@Joe-ss9cr 9 месяцев назад
Aaah we're back! Nice. You have a knack for these.
@nickarceco
@nickarceco 9 месяцев назад
We are back!!
@Gearyco
@Gearyco 9 месяцев назад
Now do it in Gutenberg with native blocks. 🤣 jk. Great video!
@nickarceco
@nickarceco 9 месяцев назад
I absolutely refuse to touch it. I watched your Gutenberg video last night while wrapping kids presents and I was cringing the entire time. I really want to see a Gutenberg advocate attempt it.
@Gearyco
@Gearyco 9 месяцев назад
Me too. I think I've recruited one or two to give it a go. We'll see.@@nickarceco
@liviustanciu165
@liviustanciu165 9 месяцев назад
Great video, Nicholas. Perfectly timed with a project I want to start. Thanks and Happy Holidays!
@TobiasGronbach
@TobiasGronbach 9 месяцев назад
Absolutely stunning! Love it!
@nickarceco
@nickarceco 9 месяцев назад
thank you tobias!
@eucalyptech
@eucalyptech 9 месяцев назад
Great tutorial, thank you Nicholas 😃
@corepusherFTW
@corepusherFTW 9 месяцев назад
Really like it. But i have a small suggestion for you to simplify it. Just get clientX and clientY and set the variables to the document body. Then use it with background-attachement: fixed. This way you can use it everywhere and only have one event listener that's generally very useful :)
@nickarceco
@nickarceco 9 месяцев назад
use background-attachment: fixed on what exactly? do you mean to the body?
@khandakershahi
@khandakershahi 8 месяцев назад
A good tutorial with a good outro. Thanks! Learn something new. 🙂
9 месяцев назад
Your Tutorials are realy good to understand. 20min and you got yourself a realy cool layout for services or features. Perfect. Keep it going and Happy holidays to you and your fam
@nickarceco
@nickarceco 9 месяцев назад
Merry Christmas to you as well! appreciate you watching Marcel.
@ben_dixon
@ben_dixon 9 месяцев назад
You have a new subscriber, that was really good. I just got Bricks and went for Core Framework not ACSS so I'm learning those. This was really helpful, thank you and have a great Christmas holidays.
@nickarceco
@nickarceco 9 месяцев назад
Thank you Ben!! Welcome!
@sunnyt0789
@sunnyt0789 9 месяцев назад
Super cool, was wondering how those were done. Great job explaining it too.
@nickarceco
@nickarceco 9 месяцев назад
Appreciate it Sunny! It's cool to see you here. 🙏
@matheuscampos8097
@matheuscampos8097 6 месяцев назад
Bro I need an complete course on Bricks by you. Honestly, havent found anyone doing this kind of stuff
@nickarceco
@nickarceco 6 месяцев назад
Thank you brother! that means a lot to me!
@GavinDavidson
@GavinDavidson 5 месяцев назад
👍🏼💫 Great stuff.
@buntuscainte4987
@buntuscainte4987 9 месяцев назад
Great tutorial. I'll be using 👍
@nickarceco
@nickarceco 9 месяцев назад
send me a link here once you do!
@Mandy-rl9vc
@Mandy-rl9vc 8 месяцев назад
I am blind and this is beautiful.
@nickarceco
@nickarceco 8 месяцев назад
This effect was made just for you!
@sebastian.schwarz
@sebastian.schwarz 9 месяцев назад
Great stuff! Thank you!
@nickarceco
@nickarceco 9 месяцев назад
My pleasure!
@hamburger--fries
@hamburger--fries 9 месяцев назад
Love the Bricks content!!! ---- Do you prefer Advanced Themer or Automatic.css ? BTW - Paid user of your Mega Menu.
@nickarceco
@nickarceco 9 месяцев назад
I use both! I use automatic.css for the CSS framework then advanced themer for the bricks tweaks. I turn off all CSS framework features from AT. I've also enjoyed using ACSS BEM class tool more than the advanced themer one however they have minor differences so I leave them both turned on. For instance I can style on ID first then move those styles to classes with AT class converter which I cant do that with ACSS. Just depends. Love them both
@sjchalton
@sjchalton 8 месяцев назад
Great video! Easiest way to make all cards equal height?
@sjchalton
@sjchalton 8 месяцев назад
Whoops nevermind, applying 'stretch' to the wrong thing!
@nikoweb
@nikoweb 9 месяцев назад
Nailed it!
@bordzee
@bordzee 8 месяцев назад
I have a problem with the var(- -mouse-x) and y its not working even tho i added the js code in the code widget and execute.
@nickarceco
@nickarceco 8 месяцев назад
Make sure it’s after your card in the DOM. When using JS that looks for an item the item has to load first for the JS to find
@th3doorMatt
@th3doorMatt 8 месяцев назад
I followed this video and I ran into some issues regarding the hover effect picking up on the grid with the padding - it still just looks for the cards themselves, so it doesn't start "further out" like in your example. Also, the local variables don't seem to work. I go to the Card (not the class), and try using different colors and can't get them to work. I don't have a plugin and effectively the only things installed at the moment are Bricks and ACSS, so it's not a "conflict" per se. Not sure what the deal is, a little bummed, since I can easily change the OG border and card colors, but not subsequent cards. Oh well, I guess the overall effect is nice, it would just be nice if it worked exactly as outlined here. And now the footer is broken and the code running in the section above this card grid section is broken now too... sooooo...effectively this entire video just broke all of the work I had done beforehand. looks like nice, but if it breaks everything, it's a waste of time unfortunately.
@nickarceco
@nickarceco 8 месяцев назад
Not quite sure what could be the issue. It sounds like a step was missed somewhere. It also sounds like a var() was not closed. When that happens it can mess up the styling of a page
@carlosp.1846
@carlosp.1846 7 месяцев назад
What app is the left blue panel with the shortcuts ?
@nickarceco
@nickarceco 7 месяцев назад
that would be arc browser. Its been my go to and has replaced chrome
@carlosp.1846
@carlosp.1846 7 месяцев назад
@@nickarceco thank you sir
@kappesante
@kappesante 9 месяцев назад
good job!
@nickarceco
@nickarceco 9 месяцев назад
Thanks!
@mightylotan
@mightylotan 6 месяцев назад
I hope Mr. Arce is ok :( been awhile since his last video
@nickarceco
@nickarceco 6 месяцев назад
Still alive! Been trying to get some cash flow so that’s taken higher importance over videos
@konstantinosntamadakis9439
@konstantinosntamadakis9439 9 месяцев назад
you could nest the same variables in the .card_content::after with difference value. No need to make double variables with different names and different values
@nickarceco
@nickarceco 9 месяцев назад
You absolutely could! I don’t just because it’s much easier for me 5 months later to come back and immediately understand what I was doing and what affects what when I separate the two
@alessiorealini9643
@alessiorealini9643 9 месяцев назад
🔥🔥🔥
@FlaviusCalinTofan
@FlaviusCalinTofan 8 месяцев назад
With more than 90% of traffic on mobile, where we have NO coursor, just touch ... all these efects are useless, and only bloat the code ? Who are you making these efects for on a website ? Just to show off ? How about some efects for mobile, touch, etc. Like a animated scroll, or a smart carousel effect, something useful for real live web ?
@nickarceco
@nickarceco 8 месяцев назад
Cant we have a little fun? 😓
@BGdev305
@BGdev305 9 месяцев назад
Not only a great tutorial but very well paced and explained!
@nickarceco
@nickarceco 9 месяцев назад
Thank you! glad it was useful to you.
@chrisparky
@chrisparky 9 месяцев назад
Fantastic stuff many thanks!
@alexradu6601
@alexradu6601 День назад
Good work man!
@derekshort
@derekshort 2 месяца назад
Good video, Nick! 😃👍🏻
@I9Chris6I
@I9Chris6I 8 месяцев назад
Awesome Tutorial! I see you are using Automatic.css, any reason you are not using the context menus? (right-click menus on inputs and colors) (I assume to make the tutorial more general?)
@nickarceco
@nickarceco 8 месяцев назад
I honestly forget they are there to be honest. Thank you for reminding me. It will make my current project go much faster 😅
@david.robertson.photography
@david.robertson.photography 2 месяца назад
Great video, again! I've not tried to recreate this yet but it I have a new site in dev that it would be perfectly suited to. Do you see any problems building this for looped cards? Thanks for all your hard work...I'm off now to install your Mega Menu! 🙏
@nickarceco
@nickarceco 2 месяца назад
it will work great for a loop. no issue there
@david.robertson.photography
@david.robertson.photography 2 месяца назад
Thanks @@nickarceco
@DomenicoMastroianni
@DomenicoMastroianni 9 месяцев назад
Hey Nick, how do you about with the clickable parent technic in this instance? I feel the z-index may override the stacking order.
@DomenicoMastroianni
@DomenicoMastroianni 9 месяцев назад
The acss utility won't work as it sets the z-index to 1. By manually creating the same technique and setting the z-index above the rest, it works.
@nickarceco
@nickarceco 9 месяцев назад
Was just about to recommend this. Glad you got it working
@adambak11
@adambak11 5 месяцев назад
HI! I followed this tutorial 3 times and nothing seems to work. There's like no effect at all, just still sitting boxes. I don't know what is wrong but I really need this effect! Can you please help me?
@nickarceco
@nickarceco 5 месяцев назад
few things come to mind 1. with the newer bricks releases make sure you sign the JS code so it can run on the front end. 2. make sure the JS is after the cards. In order for the js to select the classes the code has to run after the elements its selecting 3. make sure you have the variables and classes setup correctly with no misspellings
@adambak11
@adambak11 4 месяца назад
@@nickarceco Thank you very much! It was with the class names... However I got a new problem, when I want to make a new set of card in the same page but elsewhere, the effect only works on one container
@nickarceco
@nickarceco 4 месяца назад
@@adambak11 You would need to select each instance of the grid. Here is a method you could use. You would have to specify each grid you are using it in: pastebin.com/Pzjafin9
@adambak11
@adambak11 4 месяца назад
@@nickarceco Thank you very much, bacground glow seems to work, but the border glow isn't . Can you help me please what could be wrong? (I've checked the calss names)
@job_mg
@job_mg 9 месяцев назад
THanks for the tutorial, what app is this that you use for designing?
@nickarceco
@nickarceco 9 месяцев назад
do you mean to build the page or do you mean the browser? using bricks builder inside of arc browser.
@Hi6sl
@Hi6sl 9 месяцев назад
Nice tutorial. I'd love to see the Bricks JSON export as foundation for experiments as well.
@nickarceco
@nickarceco 9 месяцев назад
If I posted the JSON are you just gonna copy and paste without learning how it actually works? The important thing is understanding how this works
@Hi6sl
@Hi6sl 9 месяцев назад
@@nickarceco No, but find the issue in Bricks, which makes me fail to replicate the background layers properly, until I gave up for now.
Далее
Please stop using px for font-size.
15:18
Просмотров 168 тыс.
Ripple Hover Effect -- Bricks Builder Tutorial
16:31
Просмотров 1,3 тыс.
С какого года вы со мной?
00:13
Просмотров 148 тыс.
КАК БОМЖУ ЗАРАБОТАТЬ НА ТАЧКУ
1:36:32
I redesigned YOUR websites
20:44
Просмотров 21 тыс.
How to Setup FAQ Schemas in Bricks Builder
14:52
Просмотров 3,5 тыс.
11 Cool Section Layouts For Your Next Website
7:54
Просмотров 3,2 тыс.
Bricks Builder Trick - Glowing Cursor on Card Hover
12:22
How Fast Can I Fill My Inbox?
13:30
Просмотров 309 тыс.
Dynamic numbering with CSS counters
12:04
Просмотров 12 тыс.
С какого года вы со мной?
00:13
Просмотров 148 тыс.