- Проблем при кодирането на дизайн
WT форуми -> HTML / Javascript / CSS -> Проблем при кодирането на дизайн
Създайте нова тема Напишете отговор 
Автор Съобщение
confiscate
Турист
Турист

Регистриран на: 27/01/2007 8:45 am

Support: 10
Bonus: 15
Мнения: 536
Мнение 19/02/2017 10:11 pm     Проблем при кодирането на дизайн Отговорете с цитат


Здравейте,

Бихте ли ми дали насоки, как би се кодирал такъв дизай. Затруднява ме този триъгълен pointer отдясно на снимката. Как би се постигнал ?
Проблем при кодирането на дизайн

Благодаря предварително!

Поздрави
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 20/02/2017 7:35 am      Отговорете с цитат


Просто изрязваш картинката на фотошоп и я правиш с прозрачен бекграунд png.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 145
Bonus: 289
Мнения: 1338
Мнение 20/02/2017 1:20 pm      Отговорете с цитат


Понеже не искам да поствам lmgtfy линкчета, макар че едвам ме свърта - https://css-tricks.com/snippets/css/css-triangle/
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
joTunkiq
Активен
Активен

Регистриран на: 25/12/2012 12:03 pm

Support: 127
Bonus: 254
Мнения: 769
Мнение 20/02/2017 7:08 pm      Отговорете с цитат


Като гледам частта, в която е снимката и как е съединена със "поинтъра", най -вероятно това е canvas елемент, защото ако ги направиш по-отделно няма да можеш(или ще можеш, но ще бъде много трудно) да наместиш снимката с точните пропорции и на точното място, ако е фон на кутията и на триъгълника.

След като си начертаеш формата на канваса, може да заредиш снимката:

Нещо такова представлява зареждането:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width = 256;
var h = canvas.height = 256;
var img = new Image();

img.src = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
img.onload = function () {
    var pattern = ctx.createPattern(img, "repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, w, h);
};


Не съм пробвал кода, просто погледнах първият резултат в гугъл.

Ето ти малко помощен материал:
- https://www.youtube.com/watch?v=8rN0WI7hZD8 - custom shapes
- https://www.youtube.com/watch?v=DsKdZd4JfuI - drawing images on canvas
- комбинирано -> https://www.youtube.com/watch?v=N0BNbngr2IY
Idea Question
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети