ʀᴇɢɪx – Telegram
ʀᴇɢɪx
550 subscribers
160 photos
59 videos
35 files
143 links
We design & develop modern websites for businesses and startups in Ethiopia | Based in Addis Ababa.
Sharing resources, code, and portfolios to help developers grow.

💬 Join the discussion: @codebyion
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Text grid with cursor movement using html, css and JavaScript

@etwebs
🔥8🏆2
How many of are you use our color gradient generator

Here some example using it
👇👇👇
profile card
login card

interesting? if it that don't forget to react

@etwebs
🔥63👍2
The difference between “reset” and “normalize

Resetting and normalizing CSS are two approaches to managing the base styles on a web page, but their goals and methods are different.

• Resetting is the process of removing all browser default styles. The goal of resetting is to create a completely “clean” page, where all elements, such as padding, fonts, and margins, will have neutral values ​​to
eliminate differences between browsers.


• Normalization is an approach that aims to
ensure uniformity in the display of elements across browsers

. It corrects styles so that they look the same in all browsers, but does not remove all customizations, as is the case with resetting.

In summary, resetting completely resets styles, while normalization tries to align styles without disturbing the base settings.


@etwebs #css
🔥3
Mirror text effect

@etwebs
4
🖐5 Reasons Why Your Layout Is “Messy”

1 No box-sizing: border-box;

Your padding is messing up widths.
Add this

* { box-sizing: border-box; }

Fixed widths everywhere

Avoid things like width: 1200px.
Use max-width + width: 100% instead.

3 Not using Flex or Grid

Still using floats, margins, and absolute positioning?
Use display: flex or grid for better control.

No CSS Reset

Every browser has default margins.
Use normalize.css or a simple reset to start clean.

5,No central container

Layouts break without structure
Use a .container like

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem; }


If it that useful don't forget to react

@etwebs
👍72
  Frosted Glass from Games to the Web

A UI games developer (who worked on the Forza series) shares the process of translating in-game ‘frosted acrylic’ design elements to HTML. The end result is nice!

read the article 👈

@etwebs
ʀᴇɢɪx
Finally 😮‍💨😎 http://developer-et.netlify.app/ @etwebs
I just forgot to share the source code Want it? But do you really think it should be free? 😭

@etwebs
blacklion.dev.et is now live 🚀 Check it out

@etwebs
🔥6🎉31
Css anatomy

@etwebs
What are CSS units, and how do they work?

CSS units allow you to modify a website’s design, so it’s important to understand how they operate There are three different types of CSS units

Absolute Units: px, pt, PC, in, cm, mm

Relative Units: em, rem, %, ex, ch, fr

Viewport Units: VW, vh, vmin, vmax

Read more 👈

@etwebs
👍2
cursor in CSS

cursor: property name;


auto – Browser decides the cursor

default – Default arrow cursor

none – Hides the cursor

help – Displays a question mark, used for help/tooltips

context-menu – Suggests a context menu is available

pointer – Hand icon; usually
indicates a link or clickable item

progress – Shows loading but interaction is possible

wait – Shows loading; interaction not possible

cell – Shows a small cross; used in tables/grids

crosshair – Cross icon; often used in graphics apps

text – Indicates selectable text

vertical-text – Indicates vertical text selection

alias – Indicates a shortcut or alias action

copy – Indicates the element will be copied

move – Indicates the element can be moved

no-drop – Drop not allowed (like when dragging an item)

If it helpful don't forget to react


@etwebs
🔥3👍2🫡1
How do you prefer to learn new web tech?
Anonymous Poll
65%
Video tutorials
19%
Documentation
16%
Trial and error
1
Other way 💬 Reply with your favorite resource

@etwebs
🚀 Check out this amazing website developed by us!

🔗 Website KNM Training

They offer various courses to boost your skills Visit the site, explore the courses and let us know what you think! Drop a comment about your experience. 😊

💬 Join there Telegram channel
@Marveloues401

@etwebs
🏆4🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
Check out this tool for mastering flexboxes!

Flexer is a CSS sandbox that makes it easy to create and arrange flexible layouts. Simply adjust element sizes and spacing, and the site generates clean flexbox CSS code for you.

🔗 flexer.dev

Perfect for quick prototyping or learning flexbox concepts

If it is interesting don't forget to react
@etwebs
🔥3