Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :)

N

nargeleto

New Member
Здравейте,

Аз се казва @nargeleto обичам да пуша наргеленца даже много и да деполпирам та даже и да маневрирам между двете :) :) и малко като всеки типичен българин ще се правя на учителче :) хахах :) , ако на някой не му харесва да се оплаква на папата и всички висшестоящи :) Аз съм тук за да покажа малко интересни неща свързани със HTML CSS и JavaScript или така нареченото по ново му front-end development ух че сложна дума :) Ще пиша в тази тема най-различни урочета по малко вярвам че и едни да ги прочете пак ще са полезни :)

Та така да започнем с малко по новите неща във CSS3 ще започнем с 2D трансформирането на обекти или да се запознаем със transofrm :) Ма не със Трансформарсите :) Ами накратко как да трансформираме даден елемент.

Така да започнем със първия признак на transform и това е translate или буквално преведено превод :) но няма да превеждаме елемента а ще го накараме да се премести някъде чрез тази команда.

Да вземем например че имаме един div таг които ни е със размери 300px(широчина) na 100px(дължина) и за да го виждаме ще го направим във background червен примерно.

HTML: 
<div class="predpriemach">
Тука си пишем каквото си искаме :)
</div>

Добре сега за целта на урока ще пиша css в style таг но никога не го правя такта винаги във отделен файл!!
HTML: 
<style>
  .predpriemach{
   width:300px;
   height:100px;
   background:#0000FF;
   -ms-transform: translate(50px,50px); 
   -webkit-transform: translate(50px,50px);
    transform: translate(50px,100px);
   }
</style>
<div class="predpriemach">
Тука си пишем каквото си искаме :)
</div>

Така чрез този код ние направихме нашия див които има определените горе посочени размери и цвят та даже си имаме и текст в него :) Така имаме и елемента transform във трите му варианта за различни браузъри -ms-transform се използва за IE 9, -webkit-transform се използва обикновено за Сафари и стандартния си transofrm.Така след това имаме translate(50px,100px);.Ъ-ъ-ъ и какво са 50px и 100 px ??Веднага отговарям това са пикселите които искаме да преместим обекта първо пишем по дължината на оста а другото число след запетаята по вертикала или по дължината като и да е научния термин :)

Това е първия ми пост малко по късно или утре ще разгледам и другите елементи на transform :)

За съжаление все още не мога да ви слагам линкове към проекти трябват ми 10 поста :) но ще ги наваксам :)
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

Разчупвай линка и предавай уроците локално https: //codepen.io/anon/pen/epEXwV и смени фона с по-светъл, че трудно се чете текста. ;)
С нетърпение очаквам нов урок за позициониране и трансформиране на текст с padding, text-align и text-transform.
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

@petya77
Ще направя отделна тема и за това скоро стига да ми остане време :) но ще ми остане събота и неделя ще попиша повече :) За сега тука да продължим с малко по новите неща за напредналите и не до чак толкова напредналите в новостите на CSS-a.Така татка до къде бяхме стигнали. Първо искам да кажа че директно пиша каквото мисля не се лигавя или тн просто съм такъв човек счупен ми е бекспейса на клавиатурата :) И продължаваме със transofm и днес ще разгледаме scale или аз го казвам увеличаване zoom-ване :) Добре имаме следния код:

HTML: 
<style>
  .predpriemachscale{
   width:50px;
   height:50px;
   background:#ff0000;
   -ms-transform: scale(4,2); 
   -webkit-transform: scale(4,2);
    transform: scale(4,2);
   }
</style>
<div class="predpriemachscale">
</div>

Добре тука имаме един див които е 50px на 50px и казваме transform: scale(3,2); и различните му версии за браузъри говорихме го във по горния пост.Така какво означаван цифрите 4 и 2.С първата цифра определяме с колко да увеличим witdh-а или ширината а със втората със колко да увеличим height или дължината.Или тоест така написано това ще направи един правоъгълник които е със размери 200px на 100px.
Ето и линк малко заобикалям законна и го пиша разделен :) :)
http: //jsfiddle.net/nqg7u2nn/
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

Ето и малко практика на scale защото винаги е скучно да се чете само как се прави нещо на теория нека го видим на практика :) къде го ползвам най-често аз във практиката :) Аз го ползвам за увеличаване на картинка примерно създаване на zoom ефект :)

Как го правия имам следния код:

HTML: 
<div class="csspredpiemachtrick">
    <img src="vegetarian-shoes.co.uk/ Portals/42/product/images/prd06da61c8-f8a9-402a-8590-fbec98bfbf1a.jpg">
</div>
(тука линка не е правилен защото нямам мнения за да поставям линк има си всичките му атрибути http и www )

Със следния css код:
HTML: 
.csspredpiemachtrick{
    width:300px;
    height:150px;
    border:1px solid #000;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}
img{
    width:90%;
    line-height:300px;
}
img:hover{
    transform:scale(1.2,1.2);
    -webkit-transform:scale(1.2,1.2);
    -ms-transform:scale(1.2,1.2);
}

Добре да разлгедаме целия код имам си един див които в него има картинка :)

Със CSS-а първо казвам че е със размер 300px на 150px че ще в средата със margin:0 auto; и че има overflow:hidden; или тоест всичкото му съдържание се свежда само до граничите на дива не излиза извън него :) За това ще имам отделна тема :) След това казвам на css че имам картинка която искам да е със 80% ширина(width).След това казвам че когато съм на hover или тоест със мишката върху картинката чрез img:hover картинката ще ми се увеличи със по 1.2 по ширината и дължината :) Олл забравил съм че на дива които съм викнал чрез класа му съм казал и че имам text-align:center; или тоест съм центрирал съдържанието вътре във дива.

Дано да е полезен давам и линк към кога пак по малко по заобиколен начин ако някой от модератори или шефчета админи види темата моля да ги редактира ако не аз ще мина като направя 10 мнения :)
http: // jsfiddle.net/h87gt551/
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

какъв е смисъла от тая тема, не вдявам?
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

Щом не вдяваш колега значи не си за нея не е нужно от излишен спам идеята е всеки да може сам да си направи елементарни за някой неща :) Идеята е с цел обучение БЕЗПЛАТНО :)
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

Дай някакво СВ да видим какви проекти си правил?
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

Продължавам със transform и частта му от към rotate или завъртане :) Тоест как може да завъртим даден елемент чрез transform и така ето и кода които ще разгледаме:

HTML частта на кода:
HTML: 
<div>
</div>
<div class="predpriemachrotate">
</div>

CSS частта на кода:
Код: 
div{
    width:200px;
    height:100px;
    background:#ff0000;
}
.predpriemachrotate{
    width:200px;
    height:100px;
    background-color:#ff0000;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -web-kit-transofrm:rotate(30deg);
}

Така тука имаме два дива един обикновен които е 200 пиксела на 100 пиксела и друг които е с rotate със същите размери.Как работи rotate той работи чрез градуси или тоест 30deg е че сте го затваряли със тридесет градуса по часовниковата стрелка.Ако искате да обърнете ефекта обратно по часовниковата стрелка е достатачно да добавите минус пред стойността или да стане -30deg.

Ето и самия код сложил съм един margin:0 auto; на дивовете за прегледност:
jsfiddle.net/5rak7khm/

Колега ReminD защо задължително ли е да показвам проекти и CV-та наляво и надясно това е форум мисля че тук хората са събрани да си помагат аз давам простоo съвети в тип урок. Ако е против правилата на форума моля да бъда извинен.И това че отказвам да давам св-та или проекти не означава че нямам такива зад гърба си просто не намирам за нужно да се рекламирам.Благодаря и се надявам да бъда разбран правилно :)
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

Казвай с кой бразуръз работят тези неща, какви проблеми могат да възникнат, това е по-важното.
Тези неща са доста добре подредени и обяснение в w3schools.
 
От: Малко CSS :) Малко новости за начинаещи Фротендерчета и за малко по напреднали :

Добре колега @stuklen тогава местим темата във w3schools :) Знам какво точно да обяснявам мислех на края на целя цикъл за transofrm да кажа къде може да се срещат проблеми във браузърите но се чудя дали да продължавам.Един ми иска СВ друг ми казва какво точно да пиша :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе