Questions CSS වැඩ්ඩෙක් ගෙන් උදව්වක් ඔ්නේ.......

dhanukaShamen · May 15, 2023

මචන්ල මේක CSS වලිිින් හදන්නේ කොහොම ද?

Mr Bones · May 15, 2023

CSS wadiya danne na habahi oya wage hadapu components ganna athi net eke.

EdNygma · May 15, 2023

වැඩ්ඩෙක් නොවෙමි.

හැබැයි Flex box වලින් ඕක හදන්න පුළුවන් කියලා මට හිතෙනවා.

Bunji Kuraki · May 15, 2023

dhanukaShamen · May 15, 2023

EdNygma said:
වැඩ්ඩෙක් නොවෙමි.

හැබැයි Flex box වලින් ඕක හදන්න පුළුවන් කියලා මට හිතෙනවා.

eth ara parent image eke radius add karanna ba neda?

Mr Bones said:
CSS wadiya danne na habahi oya wage hadapu components ganna athi net eke.

link eheme nadda bro?
------ Post added on May 15, 2023 at 4:39 PM

EdNygma · May 15, 2023

dhanukaShamen said:
eth ara parent image eke radius add karanna ba neda?

බැරිවෙයි. ඕක වෙනම හදලා position absolute වගේ දාලා උඩට ගන්න වෙයි image එක කැපෙන විදියට.

helplesser · May 15, 2023

dhanukaShamen said:
eth ara parent image eke radius add karanna ba neda?

link eheme nadda bro?
------ Post added on May 15, 2023 at 4:39 PM

Inspect karala balapan full image ekama thiyanawada kiyala. Okun oya widiyata image eka hadala danawa welawakata

Amith0424 · May 15, 2023

EdNygma said:
බැරිවෙයි. ඕක වෙනම හදලා position absolute වගේ දාලා උඩට ගන්න වෙයි image එක කැපෙන විදියට.

box eka div tag 3k dala column kadaganna. ekin eka dekata kadanna. mulu ekema border radius dalaa hadanna. position absolute walin udata ganna. flex use kalanam responsive ekka hadanna puluwan.
background image eke curve dekak thiye opposite curve wela. green box patan ganna thana yata. aneka green box eke right side uda. before after daala hadanna.

2by2 · May 15, 2023

ඇයි ඕව chat gpt එකෙන් බැරිය ?

kolavari · May 15, 2023

Div ekak dala flex walin columns 3 ganin . Margin - ekak gahala eka udata adinna image eka overlap wenna

Counters eka grid eken gahanna

Parent image ekata svg clip path ekak danna

Nidarshana_k · May 15, 2023

UI කරන උන් දන්න සේරම වැඩ දාල UI ගහන්ව. Develop කරන උන්ට තමයි කෙල වෙන්නෙ

Bump

mal pappa · May 15, 2023

dhanukaShamen said:
View attachment 205093
මචන්ල මේක CSS වලිිින් හදන්නේ කොහොම ද?

------ Post added on May 15, 2023 at 5:21 PM

dhanukaShamen · May 15, 2023

helplesser said:
Inspect karala balapan full image ekama thiyanawada kiyala. Okun oya widiyata image eka hadala danawa welawakata

meka me Instagram eke thibba ui design ekak bro.

Lakshan-Seram · May 15, 2023

EdNygma said:
වැඩ්ඩෙක් නොවෙමි.

හැබැයි Flex box වලින් ඕක හදන්න පුළුවන් කියලා මට හිතෙනවා.

Ow lesima widiha flex box use karana eka. Grid unath awlak na

kolavari said:
Div ekak dala flex walin columns 3 ganin . Margin - ekak gahala eka udata adinna image eka overlap wenna

Counters eka grid eken gahanna

Parent image ekata svg clip path ekak danna

Margin walin ganna one na ban.

hero section eka parent gannawa flex ekak. Direction ela columns

min height eka 100svh or vh aran justify, align end karanawa.

uda kella wrap karanawa yata kella wrap karanawa so uda yata tiyenawa one widihata.

passe ithin yata kelle columns tikata grid or flex ganna puluwan ne. Border radius anan man basic css walin puluwan oka.

image eke yata corner eka element ekak wenama shape or svg ekak aran place karanna hitha denne mata nam 🫣
------ Post added on May 15, 2023 at 5:42 PM

Nidarshana_k said:
UI කරන උන් දන්න සේරම වැඩ දාල UI ගහන්ව. Develop කරන උන්ට තමයි කෙල වෙන්නෙ

Bump

Owa monada bro mata webflow walin karanna awa project ekak tibba eke elements place karala tiyena heti dekkama una hedenawa. A madiwata animations. Pages 6 witara tibba peya 30 ganak giya complete karanna.

musician kenek ge personal site eka. Uta music wage tiyenna one site eka scroll karanakota animation awith. Designer ge amma mutta sihi kara kara develop kare.
------ Post added on May 15, 2023 at 5:47 PM

BinDT · May 15, 2023

dhanukaShamen said:
View attachment 205093
මචන්ල මේක CSS වලිිින් හදන්නේ කොහොම ද?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <div class="main_div">
            <div class="sub_main_1">
                <div class="sub_1"><p>975+</p></div>          
                <div class="sub_2"><p>Furniture and Home Equipment</p></div>          
            </div>
            <div class="sub_main_2">
                <div class="sub_1"><p>320+</p></div>          
                <div class="sub_2"><p>Fresh Interior desing Theme</p></div>          
            </div>
            <div class="sub_main_3">
                <div class="sub_1"><p>462+</p></div>          
                <div class="sub_2"><p>Happy Client ore Of This</p></div>          
            </div>
    </div>
</body>
</html>

CSS:

.main_div{
    display: flex;
    justify-content: space-between;
    width: 700px;
    height: 100px;
    background-color: rgb(106, 160, 26);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 20px ;
    align-items: center;
}

.sub_main_1, .sub_main_2, .sub_main_3{
    width: 150px;
    height: 70px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 10px;
    align-items:center;
    margin-top: 15px;
}

.sub_1,.sub_2{
    width: 50px;
    height: 50px;
    color: white;
   
}
.sub_2{
    width:80px ;
}
.sub_2 p,.sub_1 p {
    text-align:left;
    margin: auto;
    width: 100%;
    font-size: 10px;
  }
.sub_1 p {
    font-size: 25px;
  }
.sub_2 p{
    margin-top: 3px;
}

mehemada balanna poddak

dhanukaShamen · May 15, 2023

BinDT said:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <div class="main_div">
            <div class="sub_main_1">
                <div class="sub_1"><p>975+</p></div>         
                <div class="sub_2"><p>Furniture and Home Equipment</p></div>         
            </div>
            <div class="sub_main_2">
                <div class="sub_1"><p>320+</p></div>         
                <div class="sub_2"><p>Fresh Interior desing Theme</p></div>         
            </div>
            <div class="sub_main_3">
                <div class="sub_1"><p>462+</p></div>         
                <div class="sub_2"><p>Happy Client ore Of This</p></div>         
            </div>
    </div>
</body>
</html>

CSS:

.main_div{
    display: flex;
    justify-content: space-between;
    width: 700px;
    height: 100px;
    background-color: rgb(106, 160, 26);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 20px ;
    align-items: center;
}

.sub_main_1, .sub_main_2, .sub_main_3{
    width: 150px;
    height: 70px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 10px;
    align-items:center;
    margin-top: 15px;
}

.sub_1,.sub_2{
    width: 50px;
    height: 50px;
    color: white;
  
}
.sub_2{
    width:80px ;
}
.sub_2 p,.sub_1 p {
    text-align:left;
    margin: auto;
    width: 100%;
    font-size: 10px;
  }
.sub_1 p {
    font-size: 25px;
  }
.sub_2 p{
    margin-top: 3px;
}

mehemada balanna poddak

Thank you bro oyage time ekata. eth mt one bro oya green box eka, image eke oya wagema place karanna. mt thiyene awla thami oya radius tika haaganna eka

Lakshan-Seram · May 15, 2023

dhanukaShamen said:
Thank you bro oyage time ekata. eth mt one bro oya green box eka, image eke oya wagema place karanna. mt thiyene awla thami oya radius tika haaganna eka

View attachment 205101

Top left eka awlak na ne eka bottom box eke radius eka mai. Bottom green box ekata white thick border ekak danna radius ekath ekka. Ethakota kisima awlak na eka.

awla enne top left and top right. Green box eka parent karagatta child elements dekak ganna absolute position karagena corner eka hariyatama parent ta relative,

polygon shape ekak hadaganna or simply svg or webp or png backgroun ekak use karanna transform walin rotate karagannath puluwan eka shape ekak hadagena.

kolavari · May 15, 2023

Lakshan-Seram said:
Ow lesima widiha flex box use karana eka. Grid unath awlak na

Margin walin ganna one na ban.

hero section eka parent gannawa flex ekak. Direction ela columns

min height eka 100svh or vh aran justify, align end karanawa.

uda kella wrap karanawa yata kella wrap karanawa so uda yata tiyenawa one widihata.

passe ithin yata kelle columns tikata grid or flex ganna puluwan ne. Border radius anan man basic css walin puluwan oka.

image eke yata corner eka element ekak wenama shape or svg ekak aran place karanna hitha denne mata nam 🫣
------ Post added on May 15, 2023 at 5:42 PM

Owa monada bro mata webflow walin karanna awa project ekak tibba eke elements place karala tiyena heti dekkama una hedenawa. A madiwata animations. Pages 6 witara tibba peya 30 ganak giya complete karanna.

musician kenek ge personal site eka. Uta music wage tiyenna one site eka scroll karanakota animation awith. Designer ge amma mutta sihi kara kara develop kare.
------ Post added on May 15, 2023 at 5:47 PM

Ow bn owa ithin karakawala one widihakin gahanna puluwan...css and html ne..

Svg ekak place karanwa nemei, svg path ekak clip path ekata denawa.. :yes:

Nathm nam oya image eke border eka ganna baha

Lakshan-Seram · May 15, 2023

kolavari said:
Ow bn owa ithin karakawala one widihakin gahanna puluwan...css and html ne..

Svg ekak place karanwa nemei, svg path ekak clip path ekata denawa..

Nathm nam oya image eke border eka ganna baha

svg ekak image eka hetiyata gattama awla tiyenne oya image eka svg eke embed wela enne retina displays wala oya image eke quality eka awl yanawa. hena high resolution embed karanna one. size eka wedi.

kolavari · May 15, 2023

Lakshan-Seram said:
svg ekak image eka hetiyata gattama awla tiyenne oya image eka svg eke embed wela enne retina displays wala oya image eke quality eka awl yanawa. hena high resolution embed karanna one. size eka wedi.

Naha svg ekak image eka widihata denawa nemei machan..

Image eka original image ekamai .clip path ekata denne svg path ekak..svg wala thiyenne <path> kiyala..

Meka balapan path kiyala thiyena eka

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Questions CSS වැඩ්ඩෙක් ගෙන් උදව්වක් ඔ්නේ.......

Junior member

Well-known member

Well-known member

Well-known member

Junior member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Junior member

Well-known member

Well-known member

Junior member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads